スライド【slider pro (jquery)】

今回は【slider pro (jquery)】を使用したスライドメニューをご紹介したいと思います。

slider proを使用したスライドの使い方はいろいろありますが、他サイトであまり解説されていないスライドを作成したいと思います。

サンプルは画面の閲覧幅を変更しても、スライド内のコンテンツの大きさは変化しないようになっています。

<html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <linK rel="stylesheet" href="css/slider-pro.min.css">
  </head>
  <body>
    <main>
      <div class="backgroundBox">
        <div class="Container">
          <nav class="slider-pro" id="slider-pro">
            <ul class="sp-slides">
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/a1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/b1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/c1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/a1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/b1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/c1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/a1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/b1.png"></a></li>
              <li class="sp-slide"><a class="sp-image" href="#"><img class="sampleImg" src="img/c1.png"></a></li>
            </ul>
          </nav>
        </div>
      </div>
    </main>
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
      <script src="js/jquery.sliderPro.min.js"></script>
    </footer>
  </body>
</html>

<ポイント>

・『slider pro』を適用する親要素に、idを付与。slider-pro、sp-slides、sp-imageのクラス名を付ける。

・slider-pro.min.cssとjquery.sliderPro.min.jsの読み込みを忘れない。

<css>

※index.cssの中身

* {
  margin: 0;
  padding: 0;
}

.backgroundBox {
  background-color: whitesmoke;
}

.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.sp-slide {
  list-style: none;
}

<ポイント>

・liタグの黒丸を消すために、list-styleを非表示にする

<js>

$(function(){
     $('#slider-pro').sliderPro({
         height: 75,
         width: 75,
         loop: true,
         arrows: false,
         slideDistance: 10,
         visibleSize: '100%',
         forceSize: 'fullWidth',
         autoSlideSize: true,
         buttons: false,
     });
});

<ポイント>

・heightは画像の高さに設定。このときwidthはheightと同じ値にするとうまく動きます。※width幅を変更すると、画面幅を変更した際にスライドが消えます。(笑)

⇒この辺の詳しい動作は、jquery.sliderPro.min.jsの中身をすべて読めばわかると思います。

・visibleSize、forceSize、autoSlideSizeの三つの設定が今回の動作の肝になっています。ここはコピペでOKです。

いかがでしたでしょうか？デモページのように、うまく動作しましたか？

今回のスライドは、webページのトップページなどに使えると思います。ご参考までに。

以上。

slider proの仕様を確認するのにめちゃくちゃ時間かかりました((苦笑