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

[PhiviaAlexandou]

[Small_Task_Help]

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

[PhiviaAlexandou]

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 

[EFOLI-Syn]

Hi @PhiviaAlexandou,

Can you please share your store URL with me so that I can check?