01 November

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

15 June

カルーセルスライダーには「slick」が一番いい！

http://kenwheeler.github.io/slick/
http://gimmicklog.main.jp/jquery/549/
http://gimmicklog.main.jp/demo/slick/slick.html
http://cly7796.net/wp/javascript/plugin-slick/

$(function() {
    $('.center-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 1,
    centerMode: true, //要素を中央寄せ
    centerPadding:'100px', //両サイドの見えている部分のサイズ
    autoplay:true, //自動再生
    responsive: [{
      breakpoint: 480,
        settings: {
          centerMode: false,
      }
    }]
  });
});

imgの入ったスライダーのを囲むdivかulには　max-width　を指定
以下のようにどっちか。

<div class="slick">
<div>img></div>
</div>

<div class="slick">
<li>img></li>
</div>

スライダー画像には　width:100%;　height:auto;　を指定しておく

カルーセルだけをやりたいならslickというjqueryプラグインがいい
レスポンシブ対応で、ブレイクポイントを定めてカルーセルの形を簡単に変えることもできる
これがすごいいい

PCサイズでは3枚表示1スライド
スマホサイズでは中央寄せ1表示1スライド

とか変幻自由。私でもわかりやすくコピペだけで可能。

カルーセルの形やオプションも豊富で、やりたいことはほぼ可能
公式もすごく見やすい
海外の公式サンプルって見難いとかどこかわかんねーとか多すぎ