I need a code to tweak and change the slideshow button to different positions /dawn

Technical Q&A
1

PhiviaAlexandou_0-1724972395638.png
PhiviaAlexandou_0-1724972395638.png1110×497 533 KB

2

Hi,

find slideshow button Class ,customize position using CSS
base.css or theme.css file add or modify css

CSS example

/* Customize the position of the slideshow button */

.slideshow__btn {
  position: absolute; /* Ensure the button is positioned relative to the slideshow */
  z-index: 10; /* Keeps the button on top of other elements */
}

/* Example Positions */

/* Bottom right */
.slideshow__btn--bottom-right {
  bottom: 20px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
}

/* Bottom left */
.slideshow__btn--bottom-left {
  bottom: 20px;
  left: 20px;
}

/* Top right */
.slideshow__btn--top-right {
  top: 20px;
  right: 20px;
}

/* Top left */
.slideshow__btn--top-left {
  top: 20px;
  left: 20px;
}

/* Centered horizontally and vertically */
.slideshow__btn--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Apply the relevant class to your slideshow

3

so If I understood correctly, lets make a scenario where I need the button to be centered top but I need it higher than default options, I just paste 2 codes;

1st code

.slideshow__btn {

position: absolute;

z-index: 10; /* }

2nd code

.slideshow__btn–center {
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}

what is the transform: translate - values for? @Small_Task_Help

4

https://ytz40akg8znmnkit-41826386080.shopifypreview.com @EFOLI-Syn

5

I can’t find the slideshow button class, can you help?

6

https://ck9vayel64jtpym6-41826386080.shopifypreview.com

I want the changes on the theme I’m editing.