15
June
カルーセル スライダーには「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スライド
とか変幻自由。私でもわかりやすくコピペだけで可能。
カルーセルの形やオプションも豊富で、やりたいことはほぼ可能
公式もすごく見やすい
海外の公式サンプルって見難いとかどこかわかんねーとか多すぎ
PR