Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I would like the 3 pagination dots that represent more than one slide to always be visible on mobile and desktop.
I have used the following css and it works fine, other than single dots now appear on all slides even if there is only one.
.sow-slide-nav, .sow-slider-pagination {
opacity: 1 !important;
display: block !important;
}
Is there any custom css that will ensure the pagination dots only appear if there is more than one slide?
Hope that makes sense.
Many thanks!
Hi Aidan,
To ensure the provided CSS only applies when you want it to apply, you should a Widget Class to your Hero widget and prepend the provided CSS selector with that widget Class. This will ensure your CSS will only apply when you want it to appear. To apply a Widget Class, please open the SiteOrigin Hero widget. Head over to the widget styles sidebar and open the Attributes settings group and set the Widget Class as desired.
Hi Alex,
Thanks for getting back to me.
So if I applied ‘morethanone’ for example as the widget class, would the custom css then need to look like following?
#morethanone .sow-slide-nav, .sow-slider-pagination {
opacity: 1 !important;
display: block !important;
}
Kind regards
Hi Aidan.
You’ll need to change #morethanone to .morethanone. . will tell the browser to look for a class while # will tell the browser to look for an id.
Perfect! Thanks for your help!
Bets wishes
Hi Aidan,
Great to hear that helped! :)
Please be sure to post another thread if you have any other questions.