Elements

If you can dream it, you can do it

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>

  • Butternut ravioli

    Butternut ravioli

    Sumptuous delicious food baked in our restaurants with curated spices
  • Grilled snapper

    Grilled snapper

    Sumptuous delicious food baked in our restaurants with curated spices
  • Roasted chicken

    Roasted chicken

    Sumptuous delicious food baked in our restaurants with curated spices
  • Golden Prawns

    Golden Prawns

    Sumptuous delicious food baked in our restaurants with curated spices
  • French Salad

    French Salad

    Sumptuous delicious food baked in our restaurants with curated spices
  • Focaccia Bread

    Focaccia Bread

    Sumptuous delicious food baked in our restaurants with curated spices
  • Spaghetti Bolognese

    Spaghetti Bolognese

    Sumptuous delicious food baked in our restaurants with curated spices

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>
demo