Dotnav
Added Classes
- .uk-active-primary
- .uk-active-danger
- .uk-active-warning
- .uk-active-success
Added JavaScript component
- clsActive
- The clsActive attribute specifies the class that will be active when using the slider and slideshow components.
By default, uk-active is specified.
These classes are used in conjunction with the slide and slideshow components.
See UIkit Documentslideshow
When using colored dotnav, you need to add an active class to the JavaScript component clsActive.
<div class="js-slideshow-animation" uk-slideshow="clsActive: uk-active-primary; ratio: 3:2; autoplay: true">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slideshow-items">
<li>
<img src="../images/a.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<img src="../images/b.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<ul class="uk-dotnav uk-flex-center uk-margin">
<li uk-slideshow-item="0"><a href="#">Item 1</a></li>
<li uk-slideshow-item="1"><a href="#">Item 2</a></li>
</ul>