Slideshow customization

Store Design
1

Hello,

I want to change some things to my slideshow, I want to have arrows in my slideshow and not under it, i have searched on the forum but everything is outdated and wont work with my theme. If i press in the slideshow on mobile it also acts weird. URL SITE: https://0cb8b8-87.myshopify.com

With kind regards,

2

Hi Djani,

Depending on the design and functionality you’re looking to achieve, you’ll need custom coding. There are a lot of examples on the web regarding slideshows or carousels, just try searching for “carousel example code”, then you’ll find tons of examples and code for it.

PaulMartin_0-1726557189453.png
PaulMartin_0-1726557189453.png1123Ă—997 61.3 KB

As for changing your slideshow arrows, your best bet is to go to the custom route than having to wrestle with Dawn’s code. My past experience with wrestling with it wasn’t a pleasant one and I wish I could’ve just gone to making it myself via coding.

As for the mobile issue you’re experiencing, I don’t see any on my end. Could you explain further what you mean by that?

3

Hi @Djani010

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.slider-buttons {
    position: absolute !important;
    z-index: 9 !important;
    top: 50%;
    left: 50%;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    border: unset !important;
    width: 100%;
}
.slider-button {
    background: #ffffffd4 !important;;
}
.slider-buttons .slider-button:hover {
    background: #fff !important;
}
.slider-counter,
.slideshow__autoplay {
    display: none !important;
}

Screenshot 2024-09-17 at 14.31.04.png
Screenshot 2024-09-17 at 14.31.04.png1700Ă—807 240 KB

Screenshot 2024-09-17 at 14.31.17.png
Screenshot 2024-09-17 at 14.31.17.png471Ă—477 167 KB

4

Hey Dan,

Im very grateful for your fix, it works like a charm! Thankyou and have a nice day.

5

One more question, can i just change the background of the arrows to transparrent so the white box is gone? And maybe make the arrows a little bigger.

6

Code updated

.slider-buttons {
    position: absolute !important;
    z-index: 9 !important;
    top: 50%;
    left: 50%;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    border: unset !important;
    width: 100%;
}
.slider-button .icon { height: 2rem !important; }
.slider-button .icon path {
    fill: #fff;
}
.slider-counter,
.slideshow__autoplay {
    display: none !important;
}
1 Like
7

Works perfectly, thankyou and have a nice day!

1 Like
8

Thanks, you too!

9

Sorry, :sweat_smile: I have one more problem where the arrows appear in the menu in the phone version. I dont know if you know it but i dont like the menu taking op the whole screen. Im using a globo mega menu, and i want it to only cover 75% of the screen with leaving a part open at the right side.

10

Code updated

.slider-buttons {
    position: absolute !important;
    z-index: 2 !important;
    top: 50%;
    left: 50%;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    border: unset !important;
    width: 100%;
}
.slider-button .icon { height: 2rem !important; }
.slider-button .icon path {
    fill: #fff;
}
.slider-counter,
.slideshow__autoplay {
    display: none !important;
}
11

You’re my hero of the day ! It looks so clean

1 Like
12

You are very welcome.

13

Bildschirm­foto 2024-09-19 um 23.59.44.png
Bildschirm­foto 2024-09-19 um 23.59.44.png738×768 397 KB

Hello,

I have one question: I added it into my store, but know i can’t press the button to go to my Catalog “Sweaters”, do you know how i can fix that? The button is on the middle of the picture it’s outlined if you can’t find it. Thank you