Slider
To create a slideset of panels with filters, use the uk-slideset class. The attributes can be used configure the parameters of the slider. See this table for all the available settings options.
You can create filters using the data-uk-filter attribute.
markup
<ul class="uk-subnav uk-flex-center"> <li class="uk-active" data-uk-filter=""><a href="#">All</a></li> <li data-uk-filter="design"><a href="#">design</a></li> <li data-uk-filter="mockup"><a href="#">mockup</a></li> </ul>
Show code
<div class="tm-slideset-sandal" data-uk-slideset="{default: 1,small: 2,medium: 2,large: 3, xlarge: 3, animation: 'slide-horizontal'}">
<ul class="uk-subnav uk-flex-center">
<li class="uk-active" data-uk-filter=""><a href="#">All</a></li>
<li data-uk-filter="design"><a href="#">design</a></li>
<li data-uk-filter="mockup"><a href="#">mockup</a></li>
<li data-uk-filter="illustration"><a href="#">illustration</a></li>
<li data-uk-filter="brochure"><a href="#">brochure</a></li>
<li data-uk-filter="architecture"><a href="#">architecture</a></li>
</ul>
<div class="uk-slidenav-position uk-margin">
<ul class="uk-grid uk-slideset uk-grid-match uk-flex-center">
<!-- slideset panel -->
<li data-uk-filter="brochure">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/1.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/1.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Butternut ravioli</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="illustration">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/2.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/2.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Grilled snapper</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="mockup">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/3.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/3.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Roasted mockup</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="architecture,illustration">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/4.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/4.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Golden Prawns</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="design">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/5.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/5.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">French Salad</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="design">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/6.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/6.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Focaccia Bread</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="brochure">
<div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
<a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/7.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/gallery/7.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
<div class="tm-overlay-box"></div>
</div>
</div>
<h3 class="uk-panel-title">Spaghetti Bolognese</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
</li>
</ul>
<a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideset-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideset-item="next"></a>
</div>
<ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-bottom-remove">
<li data-uk-slideset-item="0">
<a></a>
</li>
</ul>
</div>
