slideshow

<div class="uk-slidenav-position" data-uk-slideshow="{animation:'random-fx', autoplay: true, autoplayInterval: 3500 }">

<ul class="uk-slideshow uk-overlay-active">

<li><img src="img/place1.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>
<h2 class="uk-h2" data-uk-scrollspy="{cls:'uk-animation-slide-top uk-animation-10', delay:2500, repeat: true}">幸運の女神を貴方に</h2>
<h3 class="uk-h4 uk-text-bold" data-uk-scrollspy="{cls:'uk-animation-slide-bottom uk-animation-10', delay:2500, repeat: true}">運は全ての人に平等に与えられている。不運も幸運も</h3>
</div>
</div>
</li>
<li><img src="img/place2.jpg" />
<div class="uk-overlay-panel uk-flex uk-flex-center uk-flex-top uk-text-center uk-animation-slide-right uk-animation-3">
<h3 class="uk-h3">Slide Navigation2</h3>
</div>
</li>
<li><img src="img/place3.jpg" />
<div class="uk-overlay-panel uk-flex uk-flex-center uk-flex-top uk-text-center uk-animation-slide-left uk-animation-3">
<h3 class="uk-h3">Slide Navigation3</h3>
</div></li>
</ul>

<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
<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>

preview