Q&A
こんなリファレンスに書いてあるようなコードを提示されても何もわかりません。
slickを使用して、無限スライド（止まらずにスーッと流れていくスライド）を実装しておりますが、以下のような事象が起きており困っております。
解決策をご教示くださいますと幸いです。
①表示時にスピードが速くなる。
ページが表示された瞬間は指定しているスピードの倍ぐらいのスピードで流れており、少し経つと指定しているスピードに落ち着きます。
そのあとはずっと表示していても、速くなることはなく安定しております。
この現象はなるときとならない時があり、規則性はつかめておりません。
関係があるかはわかりませんが、jsファイルの読み込みはheadの閉じタグ直前で行っております。
何か変な指定をしているのかと思い、関係のありそうなオプションを消してみましたが、変わりませんでした。
②Microsoft Edgeで動きがガタつく
ie、Google Chrome、Safariで確認したところ、「スー」っと流れるように動いておりますが、edgeの場合のみガタガタとガタつきながら流れていきます。
こちらに関しましては、何を試せばいいかもわからず困っております。
③1920pxのモニターで表示した際に途切れる（表示が間に合ってないような挙動）
現在1280pxと1920pxのモニターを使用しており、1280pxのモニターで表示した際には途切れることなく画像が表示されますが、1920pxで表示した際にはしばらく表示しておくと、ループが3週目に差し掛かったあたりで空白が流れてきて、空白が画像1枚半分ぐらいになったあたりで急に画像が表示されます。
一定周期でこの様な現象が起きます。
ただ枚数を増やし画像を8枚にしたところ、空白はなくなります。
空白が表示されなくなるまで画像を入れればいいのですが、もし減らしたくなった際にこのような現象が起きてはいけないので、こちらも解決したいです。
実装しているソースは以下の通りです。
HTML
1<div class="slider-container"> 2 <div class="slider"> 3 <div><img src="/img/img_slide1.jpg"></div> 4 <div><img src="/img/img_slide2.jpg"></div> 5 <div><img src="/img/img_slide3.jpg"></div> 6 <div><img src="/img/img_slide4.jpg"></div> 7 <div><img src="/img/img_slide5.jpg"></div> 8 <div><img src="/img/img_slide6.jpg"></div> 9 </div> 10</div>
【外部ファイル:slick.js】
JavaScript
1$("document").ready(function(){ 2 3 $slider = $('.slider'); 4 $slider_container = $('.slider-container'); 5 6 $slider.slick({ 7 slidesToShow: 5, 8 slidesToScroll: 1, 9 centerMode: false, 10 arrows: false, 11 autoplay: true, 12 autoplaySpeed: 0, 13 speed: 5000, 14 swipe: false, 15 cssEase: 'linear', 16 pauseOnFocus: false, 17 pauseOnHover: false, 18 pauseOnDotsHover: false, 19 variableWidth: true, 20 }); 21});
初歩的な質問なのかもしれませんが、検索してみても同じ症状で悩まれている方の記事も見当たらず、解決方法もわからなかったので、こちらにて質問させていただきます。
解決策をご存知の方ご教示くださいますと幸いです。
ファイル名やalt属性、ディレクトリなどは変更しておりますが、コードはほぼそのままです。
他にどのような情報があればわりますでしょうか？
再現できるコードを提示してもらえればわかります。
変更している点でいうと画像に関する部分だけなんですが、これでは再現されないんでしょうか？
たぶん画像のサイズとslidesToShowとコンテナのサイズがあってないんだと思うんですが。
たしかにslidesToShowで指定している5枚よりも多くの画像が表示されております。
1280のモニターで見ている際には5枚が表示されているようなのですが、1920のモニターで見た際には7枚ほど表示されております。スマホで見ると1枚半ぐらいです。
さらに各スライドの下に謎の3pxほどの空白ができております。
1画面に5枚表示させたい場合、width、heightの指定などはどのように行えばよいのでしょうか？
画像の大きさがばらばらなのですが、height基準で合わせられたらと思っています。
今画像をすべて同じものに変えて、表示された時のソースを見ていると画像自体の大きさは199pxなのですが、slick-slideというクラスが付けられたdiv（自動生成されるdiv）のheightが207pxになっております。
これが原因ということなのでしょうか？
いや、ですからソースを見ないとなんとも言えないですって。
目の前に起こっていないことをいくら言葉で説明されても検証のしようもないんです。
あなたがやったことをソースで提示してください。
画像のサイズなどはhttps://placehold.jp/このらへんを使って表現できるはず。
slickでやるよりも自作したほうが安定しそうだったので一から処理を自作しました。
次回からはもう少しわかりやすい質問文を作成できるようにします。
ご意見いただきありがとうございました。
自己解決
