前提・実現したいこと
お世話になります。
現在slickのライブラリを使用した、カルーセルを作成しております。
やりたいことですが、ウィンドウサイズをスマホサイズ(768px以下)にリサイズした場合、
「initialSlide」を2枚目のスライド(initialSlide: 1)にしたいのですが、うまくできません。
お手数ですが、どなたかご教授よろしくお願いいたします。
発生している問題・エラーメッセージ
リサイズしたときにスライダーの表示順を変更したいのですが、
PC/タブレットのウィンドウサイズでloadした場合 = 1枚目から表示される(OK)
SPサイズ(768px以下)のウィンドウサイズでloadした場合 = 2枚目のスライダーが中央に表示される(OK)
SPサイズからPC/タブレットにリサイズした場合 = 1枚目から表示したい(NG)
PC/タブレットサイズからSPサイズにリサイズした場合 = 2枚目のスライダーが中央に表示される(NG)
となっております。
該当のソースコード
HTML
1 <div class="slider center"> 2 <div> 3 <img src="http://placehold.it/350x100?text=1"> 4 </div> 5 <div> 6 <img src="http://placehold.it/350x100?text=2"> 7 </div> 8 <div> 9 <img src="http://placehold.it/350x100?text=3"> 10 </div> 11 <div> 12 <img src="http://placehold.it/350x100?text=4"> 13 </div> 14 </div>
javaScript
1<script> 2 (function ($) { 3 $(function () { 4 $slick_slider = $('.center'); 5 settings = { 6 //PC/Tab設定 7 arrows: true, 8 infinite: true, 9 slidesToShow: 3, 10 initialSlide: 0, 11 // SP設定 12 responsive: [{ 13 breakpoint: 769, 14 settings: { 15 arrows: false, 16 centerMode: true, 17 centerPadding: '10%', 18 initialSlide: 1, 19 slidesToShow: 1, 20 } 21 }] 22 } 23 $slick_slider.slick(settings); 24 }); 25 })(jQuery); 26</script>