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

RaghavGoel1 · ‎08-03-2024

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 <head> element.

CODE:

<style>
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%;
}
}
</style>

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)

Dan-From-Ryviu · ‎08-03-2024

Hi @RaghavGoel1

Please update the code to this version

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 2;
    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;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

GTLOfficial · ‎08-03-2024

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

Dan-From-Ryviu · ‎08-03-2024

Hi @RaghavGoel1

Please update the code to this version

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 2;
    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;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RaghavGoel1 · ‎08-03-2024

Thanks Dan, this solves it. Thanks a lot 🙂

BSSCommerce-B2B · ‎08-03-2024

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.

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

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

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

Community Blog Articles