投稿日:

WordPressでjQueryを利用するときのカプセル化

$がそのままだと、つかえないのでカプセル化

JavaScript
1
2
3
jQuery(document).ready(function() {
  // jQueryのコードをココに書く
});

もしくは

JavaScript
1
2
3
(function($) {
  // jQueryのコードをココに書く
})(jQuery);

投稿日:

owlcarouselを利用したカルーセル

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

など使い勝手がよい

リソース

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

カルーセルのコード

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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

Sass
1
2
3
4
5
    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

カルーセルの設定のjs

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    <script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
 
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true,
      autoPlay : 2000
      });
    });
    </script>