Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

Use the `data-uk-slideshow` data attribute to show images with nice transitions. To make a slideshow fill the entire page, use the `uk-slideshow-fullscreen` class.

### Show code

`<div class="tm-slideshow-sandal uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'fade', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}"> <ul class="uk-slideshow uk-overlay-active"> <!-- slide 1 --> <li> <img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="demo"> <div class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-top"> <h3>This is a title</h3> <div><p>Your caption goes here</p></div> </div> </li> <!-- slide 2 --> <li> <img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="demo"> <div class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-top"> <h3>This is a title</h3> <div><p>Your caption goes here</p></div> </div> </li> </ul> <!-- navigation buttons --> <ul class="uk-dotnav uk-position-top uk-flex-right"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> </ul> <!-- navigation arrows --> <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a> </div>`

The following are the parameters required when using the `uk-slideshow` class:

Parameters | Description
--- | ---
`style` | Defines the slideshow style. This parameter cannot be left blank. You can set the style as `default` or `classic`
`autoplay` | Set it to true to have the slideshow play automatically. Otherwise, set to false to stop the automatic play.
`animation` | Set the transition animation between slides
`transition_duration` | set the duration for the transition animation
`autoplay_interval` | Set the duration between switching slideshow items
`kenburns` | Set it to true or false to enable/disable kenburns effect to an image

See the UIkit documentation on the available animations available for the slideshow component

### Default Slideshow

markup

### Show code

`<div class="tm-slideshow-default uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scale', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}"> <ul class="uk-slideshow uk-overlay-active"> <li><img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="demo"></li> <li><img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="demo"></li> <li><img src="images/demo/default/slider/3.jpg" width="1200" height="500" alt="demo"></li> </ul> <div class="uk-margin"> <ul class="uk-dotnav uk-flex-center uk-hidden-touch"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> <li data-uk-slideshow-item="2"><a href=""></a></li> </ul> </div> <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a> </div>`

### Classic Slideshow

- ### This is a title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  Learn more

- ### Another title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  Learn more

- ### A simple title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  Learn more

markup

### Show code

`<div class="tm-slideshow-sandal uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'random-fx', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}"> <ul class="uk-slideshow uk-overlay-active"> <!-- slide 1 --> <li> <img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"> <div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left"> <div> <h3>This is a title</h3> <div class="uk-margin"> <p>This is a caption. </p> </div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div> </div> </li> <!-- slide 2 --> <li> <img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"> <div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left"> <div> <h3>Another title</h3> <div class="uk-margin"> <p>This is a caption.</p> </div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div> </div> </li> <!-- slide 3 --> <li> <img src="images/demo/default/slider/3.jpg" width="1200" height="500" alt="image"> <div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left"> <div> <h3>A simple title</h3> <div class="uk-margin"> <p>This is a caption. </p> </div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div> </div> </li> </ul> <!-- navigation buttons --> <div class="uk-margin"> <ul class="uk-dotnav uk-flex-right uk-hidden-touch"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> <li data-uk-slideshow-item="2"><a href=""></a></li> </ul> </div> <!-- navigation arrows --> <div class="tm-slidenav uk-flex uk-flex-right uk-flex-middle"> <a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next"></a> </div> </div>`

### Testimonials in slideshow

- > Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

  > Gary Long CEO

- > Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition.

  > Lori Carroll Chief Editor

- > Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.

  > Paul Morgan Creative Designer

markup

### Show code

`<div class="tm-slideshow-default uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scroll', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}"> <ul class="uk-slideshow uk-overlay-active"> <!-- testimonial 1 --> <li> <blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i> <p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-1-thumb.png" alt="Gary Long" width="64" height="64">Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p> <span class="author uk-margin-top">Gary Long</span> <span class="jobtitle">CEO</span> </blockquote> </li> <!-- testimonial 2 --> <li> <blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i> <p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-2-thumb.png" alt="Lori Carroll" width="64" height="64">Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition.</p> <span class="author uk-margin-top">Lori Carroll</span> <span class="jobtitle">Chief Editor</span> </blockquote> </li> <!-- testimonial 3 --> <li> <blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i> <p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-3-thumb.png" alt="Paul Morgan" width="64" height="64">Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.</p> <span class="author uk-margin-top">Paul Morgan</span> <span class="jobtitle">Creative Designer</span> </blockquote> </li> </ul> <!-- navigation bullets --> <div class="uk-margin"> <ul class="uk-dotnav uk-flex-center uk-hidden-touch"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> <li data-uk-slideshow-item="2"><a href=""></a></li> </ul> </div> <!-- navigation arrows --> <div class="tm-slidenav uk-flex uk-flex-right uk-flex-middle"> <a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next"></a> </div> </div>`

### Slideshow Panel

- ### We provide timely support

  Do not dwell in the past, do not dream of the future. Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.

  Read more

- ### We keep our word

  Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.

  Read more

### Show code

`<div class="tm-slideshow-panel-sandal" id="wk-1"> <div class="uk-panel uk-panel uk-padding-remove uk-overflow-hidden"> <div class="uk-grid uk-grid-collapse uk-flex-middle" data-uk-grid-margin=""> <div class="uk-width-medium-1-2 uk-text-center uk-row-first"> <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'swipe'}"> <ul class="uk-slideshow"> <li><img alt="demo" height="420" src="images/demo/default/content/content-1.jpg" width="650"></li> <li><img alt="demo" height="420" src="images/demo/default/content/content-2.jpg" width="650"></li> </ul> <a class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous" href="#"></a> <a class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next" href="#"></a> <div class="uk-position-bottom uk-margin-large-bottom uk-margin-large-left uk-margin-large-right"> <ul class="uk-dotnav uk-dotnav-contrast uk-flex-center uk-margin-bottom-remove"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> </ul> </div> </div> </div> <div class="uk-width-medium-1-2"> <div class="uk-panel-body uk-margin-left uk-text-left" data-uk-slideshow=""> <ul class="uk-slideshow"> <li> <div class="uk-width-xlarge-9-10"> <h3 class="uk-module-title uk-h2 uk-margin-top-remove"><a class="uk-link-reset" href="#">Your title</a></h3> <div class=" uk-margin-top"> your content here </div> <p class="uk-margin-bottom-remove"> <a class="uk-margin-top uk-button uk-button-primary" href="#">Read more <i class="uk-icon-chevron-right"></i></a> </p> </div> </li> <li> <div class="uk-width-xlarge-9-10"> <h3 class="uk-module-title uk-h2 uk-margin-top-remove"><a class="uk-link-reset" href="#">Your title</a></h3> <div class=" uk-margin-top"> Your content here </div> <p class="uk-margin-bottom-remove"> <a class="uk-margin-top uk-button uk-button-primary" href="#">Read more <i class="uk-icon-chevron-right"></i></a> </p> </div> </li> </ul> </div> </div> </div> </div> </div>`

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes