jqueryスライダー「slick.js」で左右の画像を少しだけチラ見せする方法
slickを使って左右をチラ見せする方法
チラ見せする際のjsは以下の通りです。
$(document).ready(function() {
$('.mypattern').slick({
autoplay: true,
autoplaySpeed: 2500,
speed: 800,
dots: true,
arrows: true,
centerMode: true,
centerPadding: '20%',
});
});
centerPaddingの値を変えることでチラ見せの幅を広くしたり狭くしたりできます。
各オプションは以下の通りです。
| オプション | 説明 |
| autoplay | 自動再生の有効化 [default:false] |
| autoplaySpeed | 自動再生のスピード（ミリ秒単位） default:3000 |
| speed | スライド/フェードアニメーションの速度 [default:300] |
| dots | ドットナビを表示する [default:false] |
| arrows | 前/次の矢印の生成の有効化 [default:true] |
| centerMode | slidesToShowが奇数の時、現在のスライドを中央に表示するか [default:false] |
| centerPadding | centerMode:trueの時、左右のスライドを見せる幅(px or %) [default:50px] |
