A user is experiencing issues with a carousel/slideshow on their Shopify Dawn 12.0.0 theme. The carousel works on both mobile and desktop, but lacks navigation slider buttons and instead displays a “1/4” counter indicator beneath it.
Goal: Remove the “1/4” counter and add proper carousel slider buttons for both mobile and desktop views.
Proposed Solution:
A community member suggests using CSS media queries to hide slideshow controls/counter on mobile devices:
@media only screen and (max-width: 767px) {
.slideshow-controls,
.slideshow-counter {
display: none;
}
}
Status: The solution addresses hiding elements but doesn’t fully resolve adding proper slider buttons. The discussion appears incomplete, with the response text partially corrupted/reversed.
Hello community!
I have figured out how to make the carousel work on mobile & desktop BUT They are not showing slider buttons and instead showing some 1/4 thing under it:
Same for mobile
I want to add a carousel slider and remove the 1/4 thingy on mobile & desktop like this:
Pls help me
Theme: Dawn 12.0.0
Website: www.faithandyou.in
Hello @AryavK
Yes, it is possible to remove the slideshow controls/counter for mobile devices only in the Dawn theme. You can achieve this by using CSS media queries to selectively hide the controls and counter on mobile devices. Here’s an example of how you can do it:
Access the theme editor: Go to your Shopify admin dashboard and navigate to “Online Store” → “Themes”. Find the Dawn theme and click on the “Actions” dropdown, then select “Edit code”.
Locate the slideshow code: In the theme editor, search for the code that generates the slideshow. This code is usually found within a section or template file and may have CSS classes or IDs associated with it.
Add custom CSS: Within the slideshow code, you’ll need to add custom CSS to hide the controls and counter on mobile devices. Insert the following CSS code:
@media only screen and (max-width: 767px) {
.slideshow-controls,
.slideshow-counter {
display: none;
}
}