Left and Right Arrows

In this recipe, we will modify the Control Bar plugin so the Previous and Next arrows are on the side of the viewer.

Preview:

To achieve the above you also need to do a few changes in the plugin settings

CSS:

#overlay  wdg-control-kavftig   .control{
  width: 100%;
  bottom: 50%;
}

#overlay  wdg-control-kavftig  sh-icon {
  width: 64px !important;
  height: 64px !important;
}

#overlay  wdg-control-kavftig  button:nth-child(1) {
  left: 0px;
}

#overlay  wdg-control-kavftig  button:nth-child(2) {
  right: 0px;
}

#overlay > wdg-control-kavftig  button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px; 
}