質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2625閲覧

SlickでcenterMode : trueの時slidesToScrollがうまく効かない

tamacom68

総合スコア13

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/16 00:18

編集2020/06/16 01:09

前提・実現したいこと

slick.jsでセンターモードを使用しスクロール量(slidesToScroll)を
PC時とSP時など画面幅で変更したいのですが、センターモードをtrueにすると
動かなくなってしまいます。調べてみたら元々のslick.jsでの不具合みたいなんですが
slickSetOptionを使用することで対処できるようなのでやってみたのですが画面幅の切替時に
動作がうまくいきません。事象としては以下のような感じです。

  • PC→SP幅を縮めた時 動作◎ slidesToScroll:3からslidesToScroll:1へ切替成功
  • SP→PCへ幅を広げた時 動作☓ slidesToScroll:1のまま

PC→SP、SP→PCどちらへ幅を変更しても切り替えられるようにしたいです。

該当のソースコード

html

1<div id="js-slick"> 2 <div> 3 <a href="#dummy"> 4 <div class="img-box"><img src="images.jpg" alt=""></div> 5 <p>dummy text dummy text dummy text dummy text</p> 6 </a> 7 </div> 8 <div> 9 <a href="#dummy"> 10 <div class="img-box"><img src="images.jpg" alt=""></div> 11 <p>dummy text dummy text dummy text dummy text</p> 12 </a> 13 </div> 14 <div> 15 <a href="#dummy"> 16 <div class="img-box"><img src="images.jpg" alt=""></div> 17 <p>dummy text dummy text dummy text dummy text</p> 18 </a> 19 </div> 20 <div> 21 <a href="#dummy"> 22 <div class="img-box"><img src="images.jpg" alt=""></div> 23 <p>dummy text dummy text dummy text dummy text</p> 24 </a> 25 </div> 26 <div> 27 <a href="#dummy"> 28 <div class="img-box"><img src="images.jpg" alt=""></div> 29 <p>dummy text dummy text dummy text dummy text</p> 30 </a> 31 </div> 32</div>

css

1.slick-slide { 2 background: #fff; 3 max-width: 342px; 4 min-height: 435px; 5 margin: 0 12px; 6} 7 8.slick-slide a { 9 display: block; 10} 11 12.slick-dots li { 13 position: relative; 14 display: inline-block; 15 width: 10px; 16 height: 10px; 17 list-style: none; 18 border-radius: 5px; 19 margin: 0 5px; 20 border: 2px solid #fff; 21} 22 23.slick-dots li.slick-active { 24 background: #fff; 25 border-color: #fff; 26} 27 28.slick-dots { 29 position: absolute; 30 bottom: -90px; 31} 32 33.img-box { 34 width: 342px; 35 height: 256px; 36 overflow: hidden; 37 display: flex; 38 justify-content: center; 39 align-items: center; 40} 41 42.img-box img { 43 width: 100%; 44} 45 46 47@media (max-width: 768px) { 48 .slick-slide { 49 max-width: 275px; 50 min-height: 350px; 51 margin: 0 12px; 52 background: #fff; 53 } 54 55 .img-box { 56 width: 275px; 57 height: 205px; 58 } 59 60 .slick-dots { 61 position: absolute; 62 bottom: -50px; 63 } 64 65 .slick-dots li { 66 background-color: #000000; 67 opacity: 1; 68 } 69}

js

1$(document).ready(function () { 2 const target = $('#js-slick') 3 target.slick({ 4 slidesToShow: 3, 5 slidesToScroll: 3, 6 arrows: false, 7 dots: true, 8 centerMode: true, 9 variableWidth: true, 10 responsive: [{ 11 breakpoint: 768, 12 settings: { 13 slidesToScroll: 1, 14 } 15 }] 16 }); 17 target.slick("slickSetOption", "slidesToScroll", 3, "dots", true); 18});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ウインドウリサイズのイベントを追加し解決しました!
一方通行的な作りなのがいけなかったみたいです。

投稿2020/06/16 08:05

tamacom68

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問