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 data-uk-filter=""><a href="#">All</a></li> <li data-uk-filter="bread"><a href="#">bread</a></li> <li data-uk-filter="chicken"><a href="#">chicken</a></li> </ul>
Show code
<div class="tm-slideset-gaucho" data-uk-slideset="{default: 1,small: 2,medium: 2,large: 3, xlarge: 3, animation: 'fade'}">
<ul class="uk-subnav uk-flex-center">
<li data-uk-filter=""><a href="#">All</a></li>
<li data-uk-filter="bread"><a href="#">bread</a></li>
<li data-uk-filter="chicken"><a href="#">chicken</a></li>
<li data-uk-filter="fish"><a href="#">fish</a></li>
<li data-uk-filter="pasta"><a href="#">pasta</a></li>
<li data-uk-filter="prawns"><a href="#">prawns</a></li>
<li data-uk-filter="salads"><a href="#">salads</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="pasta">
<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/menu/special-1.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-1.jpg" class="uk-overlay-scale" alt="Butternut ravioli" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Butternut ravioli</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="fish">
<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/menu/special-2.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-2.jpg" class="uk-overlay-scale" alt="Grilled snapper" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Grilled snapper</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="chicken">
<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/menu/special-3.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-3.jpg" class="uk-overlay-scale" alt="Roasted chicken" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Roasted chicken</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="prawns,fish">
<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/menu/special-4.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-4.jpg" class="uk-overlay-scale" alt="Golden Prawns" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Golden Prawns</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="salads">
<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/menu/special-5.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-5.jpg" class="uk-overlay-scale" alt="French Salad" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">French Salad</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="bread">
<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/menu/special-6.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-6.jpg" class="uk-overlay-scale" alt="Focaccia Bread" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Focaccia Bread</h3> Sumptuous delicious food baked in our restaurants with curated spices </div>
</li>
<!-- slideset panel -->
<li data-uk-filter="pasta">
<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/menu/special-7.jpg"></a>
<div class="uk-text-center uk-panel-teaser">
<div class="uk-overlay "> <img src="images/demo/menu/special-7.jpg" class="uk-overlay-scale" alt="Spaghetti Bolognese" width="360" height="230" url="#">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
</div>
</div>
<h3 class="uk-panel-title">Spaghetti Bolognese</h3> Sumptuous delicious food baked in our restaurants with curated spices </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>
