<div class="uk-container uk-container-center">
<h3 class="uk-margin-top">Tab autoplayer Test</h3>
  <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">Hello World</a></li>
    <li><a href="">芥川龍之介</a></li>
    <li><a href="">工房について</a></li>
    <li><a href="">広大な畑と赤い屋根</a></li>
    <li><a href="">桜の花</a></li>
  </ul>
  <ul id="my-id" class="uk-switcher uk-margin">
    <li><a href="#" id="autoplayer" data-uk-switcher-item="next"></a>
      Hello World（ハロー・ワールド）は、画面上（標準出力）に “Hello, World!”、又は類似の文言を表示するだけの単純なプログラムである。<br>
      大抵のプログラミング言語の入門書では、このプログラムを作ることを最初の例題としており、ほとんどの場合、新しくプログラミング言語を習得する際に最初に作るのがこのプログラムである。そのため、「世界一有名なプログラム」と呼ばれることもある。また、コンパイラ、開発環境、実行環境が正常にインストールされたことを確認するために、このプログラムを使用することが多い。
      </li>
    <li>人間分析による理知的な作品を多く残し、現在でも非常に人気の高い作家である。
      東京帝国大学在学中に菊池寛・久米正雄等と共に刊行した同人誌「新思潮（第四次）」創刊号に掲載した『鼻』が夏目漱石の激賞を受け、多く王朝時代や江戸期キリシタンに材を採った短編を続々と発表する。後に毎日新聞社に就職して創作に専念。後期には、私小説的傾向の強い小説を発表した。
      1927年自殺。</li>
    <li>FOREST STUDIOでは、自然の中にある「森の工房」を運営しています。森の工房は木々のあふれる森の中にあり、四季を通してイベントを開催したり、さまざまなグッズの開発などを行っています。</li>
    <li>ひさしぶりの北海道です。今日は魚を食べにオホーツク海へ行こうと思い立ち、空港でレンタカーを借りて出発。道中、畑の中を走っていたら、遠くにかわいらしい赤い屋根の建物が見えてきたので、思わず一枚撮ってしまいました。<br>
      testひさしぶりの北海道です。今日は魚を食べにオホーツク海へ行こうと思い立ち、空港でレンタカーを借りて出発。道中、畑の中を走っていたら、遠くにかわいらしい赤い屋根の建物が見えてきたので、思わず一枚撮ってしまいました。
    </li>
    <li>造幣局の桜の通り抜けにやってきました。雨が降り出しそうな天気でしたが、いろいろな桜が満開で見ごたえありでした。人出もすごかったですが…。ちなみに、この桜は「関山」という八重桜の代表的な品種なのだそうです。<br>
      test2造幣局の桜の通り抜けにやってきました。雨が降り出しそうな天気でしたが、いろいろな桜が満開で見ごたえありでした。人出もすごかったですが…。ちなみに、この桜は「関山」という八重桜の代表的な品種なのだそうです。</li>
  </ul>

</div>

preview

<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

<button data-uk-offcanvas="{target:'#offcanvas-1'}" 
class="uk-button uk-button-success">Open</button>

<div class="uk-offcanvas" id="offcanvas-1">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
 <p class="uk-text-justify" style="color: #fff"> 
何かを求めて人は旅にでます。<br>
そのきっかけはさまざまですが、<br>
行き詰まった現実を乗り越えたいと何かを求め、<br>
また、老いの時間と対座しているうちに、<br>
懐かしい青春の地を訪れたいと思う人がおられると思います。<br>
突然、昭和三十五年のある日、文明は故郷の保渡田を、<br>
帰りは昔通った高崎中学校への通学路を通って、<br>
昔の中学校の跡を訪れています。<br>
その中学校跡は現在の市立第一中学校です。</p>
</div>
</div>
</div>

 
.uk-offcanvas-bar {
    width: 260px;
    max-width: 100%;
    background: #333;
}

preview

<h3 class="tm-article-subtitle">Example</h3>
<p>
<img class="uk-border-rounded" src="images/02.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="images/03.jpg" width="200" height="200" alt="Border circle">
 </p>
 <hr class="uk-article-divider">

preview

<p>
<a href="http://kyou.conf.jp/" 
class="uk-button uk-button-danger uk-button-small">
minakami link test</a>
</p>

.uk-button-mini
.uk-button-small 
.uk-button-large

.uk-button-primary 
.uk-button-success 
.uk-button-danger
.uk-button-link

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">test</button>

<div class="uk-container uk-container-center uk-margin-large-bottom">
<p> <a class="uk-button" href="">Link</a>
<button class="uk-button" type="button">Button</button>
<button class="uk-button uk-button-primary" type="button" data-uk-button>Button1</button>
</p>

preview