UIkitでサムネイル付きスライダーを作る

WEB

UIkitはCSSのフレームワークです。bootstrapが有名ですが、最近はUIkitも人気があります。私も最近使い始めてその便利さにすっかり魅了されています。

別のウェブサイトでサムネイル付きのスライダーを作ろうと思い、当然Uikitにいい感じのものが揃っているだろうとスライダーのページを見て、ざっと下にスクロールしてもサムネイル付きのスライダーが見当たりません。なるほど、スライダーのすぐ上にあるスライダーナビにあるんだと思ってみても見当たりません。この辺りで諦めて、Google先生に尋ねてみましたが、見つけられませんでした。

改めてUIkitのスライダーのページをよく見ると、サムネイルナビの紹介がありました。画像だけをささっと見ただけで確認した気でいました。

サムネイル付きスライダーのサンプル


ソースコードは下記の感じです。

スライダーは、1行目のdivタグの値をUIkitスライダーのコンポーネントを参考に変えることで動作が変わります。

サムネイルは、29行目のdivタグの値をUIkitサムネイルナビを参考に変えると設定が変わります。

サムネイルの画像を別途用意するのが面倒でしたら、スライダーの画像と同じものをサムネイルに設置し、CSSで大きさをコントロールすればよいです。その場合、スライダーをめくってもめくらなくてもすべてのスライダー画像を読み込むことになるので、表示に時間がかかります。


<div class="uk-section uk-section-xsmall uk-position-relative" uk-slider="center: true;finite:false;" uk-slideshow="animation: slide">
  <ul class="uk-slider-items uk-grid">
    <li>
      <div class="uk-panel">
        <img src="1つめの画像" alt="" />
      </div>
    </li>
    <li>
      <div class="uk-panel">
        <img src="2つめの画像" alt="" />
      </div>
    </li>
    <li>
      <div class="uk-panel">
        <img src="3つめの画像" alt="" />
      </div>
    </li>
    <li>
      <div class="uk-panel">
        <img src="4つめの画像" alt="" />
      </div>
    </li>
  </ul>

<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>

<ul class="uk-thumbnav uk-margin-auto uk-flex-center">
  <li uk-slider-item="0" class="uk-width-1-6">
    <a href="#">
      <img src="1つめの画像（サムネイル）" alt="" />
    </a>
  </li>
  <li uk-slider-item="1" class="uk-width-1-6">
    <a href="#">
      <img src="2つめの画像（サムネイル）" alt="" />
    </a>
  </li>
  <li uk-slider-item="2" class="uk-width-1-6">
    <a href="#">
      <img src="2つめの画像（サムネイル）" alt="" />
    </a>
  </li>
  <li uk-slider-item="3" class="uk-width-1-6">
    <a href="#">
      <img src="3つめの画像（サムネイル）" alt="" />
    </a>
  </li>
  </ul>
</div>