web-dev-qa-db-ja.com

スリックスライダーの自動再生が機能しない

私のウェブページに スリックスライダー を実装しました。スワイプは問題なく機能し、画像は次々に表示されます。私が抱えている唯一の問題は、ページの読み込みが完了したときにスライダーがautoplayを開始するようにすることです。

ここに 私のページへのリンク。

HTML

<div class="single-item insideslideshow slider autoplay slickplay">
    <div class="eachsliderimage" style="background-image: url('images/real-estate/2.jpg');"></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/1.jpg'); "></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/3.gif'); "></div>
    <div class="eachsliderimage" style="background-image: url('images/real-estate/4.jpg'); "></div>
</div>

JavaScriptコード：

<script type="text/javascript">
$(document).ready(function(){
  $('.single-item').slick({
      draggable: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      touchThreshold: 1000,
  });
    $('.autoplay').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
  });
});
javascripthtmlcssslick.js
6
Alex Banman

あなたの問題はあなたがあなたの.single-itemにautoplayを設定していないということです

JavaScriptを以下のコードに変更すると、機能します。

$(document).ready(function(){
  $('.single-item').slick({
      draggable: true,
      autoplay: true, /* this is the new line */
      autoplaySpeed: 2000,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      touchThreshold: 1000,
  });
});
8
Frits