Slideshow customization

[Djani010]

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,

[PaulMartin]

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.

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?

[Dan-From-Ryviu · Accepted solution]

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;
}

[Djani010]

Hey Dan,

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

[Djani010]

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.

[Dan-From-Ryviu]

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;
}

[Djani010]

Works perfectly, thankyou and have a nice day!

[Dan-From-Ryviu]

Thanks, you too! 

[Djani010]

Sorry,😅 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. 

[Dan-From-Ryviu]

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;
}

[HoodLove]

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

[Dan-From-Ryviu]

You are very welcome.

[HoodLove]

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