IMPORTANT PLS: Need help in fixing slideshow (carousel) arrows

[RaghavGoel1]

Hey all,

I wanted to add arrows (to move left & right) to my slideshows (DAWN THEME) and remove the page numbers/dot panel from below. To achieve the same, I added the following code to theme.liquid under element.

CODE:

slideshow-component .slideshow__controls { justify-content: space-between; position: absolute; top: 50%; z-index: 9; left: 50%; width: 100%; transform: translate(-50%, -50%); border: unset; } slideshow-component .slideshow__controls .slider-counter, slideshow-component .slideshow__controls .slideshow__autoplay { display: none; } slideshow-component .slideshow__controls .slider-button { width: 64px; height: 84px; } slideshow-component .slideshow__controls .slider-button .icon { height: 1.6rem; } @media (max-width: 749px) { slideshow-component .slideshow__controls { top: 30%; } }

The results were-

On desktop its coming perfectly, as you can see below:

However, on mobile version I’m facing two issues-

1> On mobile, the arrows are not vertically centered… they are slightly towards the top.

2> Also, the arrows are appearing on top when Im opening the mobile menu… they are not under the menu but rather on top of it…

Can someone please please help fix these two things? I’ve tried myself for hours now. Would be really grateful.

Thanks a ton!!

My site - https://f40566-d3.myshopify.com/?_ab=0&_fd=0&_sc=1

(I can also change the code entirely if someone has a better alternative)

[GTLOfficial]

Hello @RaghavGoel1

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the very end of the file.

@media (max-width: 749px) {
slideshow-component .slideshow__controls {
top: 50% !important;
}
}
.announcement-bar .slider-button--prev {
display: none;
}

.announcement-bar .slider-button--next {
display: none;
}

result

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Dan-From-Ryviu]

Hi @RaghavGoel1

Please update the code to this version

[BSSCommerce-B2B]

Hi @RaghavGoel1

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the main css file base.css
Step 3. Copy this code at the end of the file

@media (max-width: 749px) {
    slideshow-component .slideshow__controls {
            z-index: 2 !important;
            margin-top: 20%;
        }
    }
}

This is result

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

[RaghavGoel1]

Thanks Dan, this solves it. Thanks a lot