写真のスライドショーで逆再生したりスピードが速くなる原因

実現したいこと

写真をスライドショーで同じスピードで動き続けるようにしたいです。
学習し始めたばかりでどこが間違っているのか分かりません。
教えていただきたいです。

発生している問題・分からないこと

一定時間が経つと逆に動いたり早く動いたりしてしまう

エラーメッセージ

error

1エラーメッセージはなし

該当のソースコード

javascript

1// sliderのjs2$('.slider').slick({3 arrows: false, //左右の矢印はなし4 autoplay: true, //自動的に動き出すか。初期値はfalse。5 autoplaySpeed: 0, //自動的に動き出す待ち時間。初期値は3000ですが今回の見せ方では06 speed: 6000, //スライドのスピード。初期値は300。7 swipe: false,8 infinite: true, //スライドをループさせるかどうか。初期値はtrue。9 pauseOnHover: false, //オンマウスでスライドを一時停止させるかどうか。初期値はtrue。10 pauseOnFocus: false, //フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。11 pauseOnDotsHover: false,12 cssEase: 'linear', //動き方。初期値はeaseですが、スムースな動きで見せたいのでlinear13 slidesToShow: 10, //スライドを画面に10枚見せる14 slidesToScroll: 1, //1回のスライドで動かす要素数15 responsive: [{16 breakpoint: 1200, //モニターの横幅が1200px以下の見せ方17 settings: {18 slidesToShow: 8, //スライドを画面に8枚見せる19 }20 },21 22 23 {24 breakpoint: 900, //モニターの横幅が900px以下の見せ方25 settings: {26 slidesToShow: 7, //スライドを画面に7枚見せる27 }28 },29 {30 breakpoint: 767, //モニターの横幅が767px以下の見せ方31 settings: {32 slidesToShow: 6, //スライドを画面に6枚見せる33 }34 },35 {36 breakpoint: 550, //モニターの横幅が550px以下の見せ方37 settings: {38 slidesToShow: 5, //スライドを画面に5枚見せる39 }40 },41 {42 breakpoint: 450, //モニターの横幅が450px以下の見せ方43 settings: {44 slidesToShow: 4, //スライドを画面に4枚見せる45 }46 },47 48 ]49});

CSS

1@charset "utf-8";2 3/*=======スライダーのためのcssここから=========*/4.slider{5 display: flex;6 pointer-events: none;7}8.slider img {9 width: 100%; /*スライダー内の画像を横幅100%に*/10 11}12/*slickのJSで書かれるタグ内、スライド左右の余白調整*/13.slider .slick-slide {14 margin: 0 20px; /*スライド左右の余白調整*/15}16/*=======スライダーのためのcssここまで=========*/17 18

HTML

1 <ul class="slider"> 2 <li><img src="img/donuts/donut16.jpg" alt=""></li> 3 <li><img src="img/donuts/donut16.jpg" alt=""></li> 4 <li><img src="img/donuts/donut16.jpg" alt=""></li> 5 <li><img src="img/donuts/donut16.jpg" alt=""></li> 6 <li><img src="img/donuts/donut16.jpg" alt=""></li> 7 <li><img src="img/donuts/donut16.jpg" alt=""></li> 8<li><img src="img/donuts/donut16.jpg" alt=""></li> 9<li><img src="img/donuts/donut16.jpg" alt=""></li> 10 11 </ul> 12 </div>

試したこと・調べたこと

上記の詳細・結果

スライドの画面の枚数を変更したりしましたが、改善されませんでした。

補足

特になし

コメントを投稿

0 コメント