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:

.control{
  width: 100%;
}

#overlay  wdg-control-kavftig  div {
  top: 50%;
  bottom: 50%;
  --tool-icon-size: 70px;
}

button[aria-label='next_pano_button']{
  position: absolute;
  right: 0;
  margin: 0 !important;
  bottom: 50%;
  right: 25px;
   bottom: -45px;
}

button[aria-label='prev_pano_button']{
  position: absolute;
  left: 0;
  margin: 0 !important;
  left: 25px;
}

#overlay.mobile button[aria-label='next_pano_button']{
  right: -25px;
  bottom: -45px;
}

#overlay.mobile button[aria-label='prev_pano_button']{
  left: -25px;
}

#overlay.mobile wdg-control-kavftig {
  --margin: 47px !important;
}