owlcarouselを利用したカルーセル

• レスポンシブへの対応
• スワイプ可能
• ナビゲーションのON,OFF

など使い勝手がよい

リソース

• 説明サイト
  • https://owlcarousel2.github.io/OwlCarousel2/
• ドキュメント
  • https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
• Github
  • https://github.com/OwlCarousel2/OwlCarousel2/tree/develop/dist

まず、上記URLより元のCSSとJSを読み込む。その上で下記のsnippetで利用する

カルーセルのコード

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=one" alt="The Last of us"></div>
    <div class="item"><img src="http://placehold.it/800x300/444444/f6f6f6?text=two" alt="GTA V"></div>
    <div class="rand">
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=three"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/444444/f6f6f6?text=four"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=five"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/444444/f6f6f6?text=six"
                    alt="Mirror Edge"></a></div>
    </div>
</div>

追加するCSS

    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

カルーセルの設定のjs

    <script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({

      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true,
      autoPlay : 2000
      });
    });
    </script>