Turn off carousel indicators (the dots) in mobile

[juniper]

Hi- I’ve almost finished the website- 14 pages! Everything looks fine except in mobile the carousel dots are obtrusive (in the middle).

Is there some way to turn off the option (for the dots) just in mobile and not the other two views? or conversely, can I turn on Auto just for mobile?

When I use the page setting- it’s all three views on or all three off. When I tried using the subclasses the carousel shrank and moved almost off the page. I’m afraid to tinker too much with subclasses because I’ve had the app freeze and had to redo the carousel a couple of times.

Thanks in advance.

[nelo]

You could duplicate your carousel and leave only the active mobile view and in the other carousel hide in the mobile view, so you can deactivate the indicators for mobile view.

[juniper]

Brilliant. LOL. Now why didn’t I think of that. Thanks!!

[Blocs_User]

@juniper

Turn off carousel indicators (the dots) in mobile — Is there some way to turn off the option (for the dots) just in mobile and not the other two views?

A better way verse duplicating the entire Carousel section of the page structure as suggested above, would be to utilize the Sub-Class in conjunction with Breakpoint Views and handle it that way.

https://help.blocsapp.com/breakpoint-views/
https://help.blocsapp.com/subclass-reference-guide/
https://help.blocsapp.com/the-basics-of-using-sub-classes/

There is already a Sub-Class available for that:

Carousel Indicators [ .carousel-indicators li ]
The class that gives the standard Blocs Carousel Slide Indicators (small dots at the bottom of a carousel) their visual appearance. Key class rules to change for this subclass are the border and background colors.

1.] Select the Breakpoint View you wish to target:

Tablet and Below:

Mobile:

2.] Open the Class Manager & Select the Sub-Class → Carousel Indicator:

3.] Now, Edit the Class and set the Display to None

Click Done.

---

Now the indicator dots will not display at the chosen Breakpoint. You will now see something similar added in your exported style.css:

@media (max-width: 991px) {
	.carousel-indicators li {
	      display:none;
    }
}

This is a better / cleaner approach than duplicating the entire Carousel section of the page structure.

[Juerg]

Hey, thanks a lot explaining this

[juniper]

HI-Thanks for this really clear explanation. I wish I had seen this before duplicating carousels on 14 pages. LOL. When I have time, I’ll go back and do it this way… This is a much cleaner solution. I wondered about load times with two carousels on a page. Thank you.