4

ajax呼び出しが成功した後に呼び出しているときに、滑らかでないメソッドが機能しない理由を解明しようとしています。この投稿を読んでslick-initializedクラスを探していますが、まだエラーが発生しています

TypeError: .$slides is null if ( .$slides.parent().hasClass('slick-track'))

HTML

<div id="skills" class="skills_section">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

ページの読み込み時にスリックを初期化すると、マークアップは次のようになります。

<div id="skills" class="skills_section slick-initialized slick-slider">
  <div class="slick-list draggable">
    <div class="slick-track">
      <div class="slick-slide slick-cloned">Slide 1</div>
      <div class="slick-slide slick-cloned">Slide 2</div>
      <div class="slick-slide slick-cloned">Slide 3</div>
    </div>
  </div>
 </div>

それぞれのデータを置き換えるだけのajax呼び出しがありますslick-slide

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
   success: function(data) {
     unSlickCarousel();
     slickCarousel();
   }
});

機能

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

function unSlickCarousel() {
  if($('#skills').hasClass('slick-initialized')){
    $('.skills_section').unslick();
  }
}

しかし、私が述べたように、エラーが発生し、HTML マークアップは次のようになります

<div id="skills" class="skills_section slick-initialized slick-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
4

3 に答える 3

12

巧妙なメソッドを呼び出す方法が変わったと思います。

それ以外の$('.skills_section').unslick();

試す$('.skills_section').slick("unslick");

また、スリックオプションのレスポンシブオプション内でこれを直接呼び出します

于 2015-02-12T12:34:37.747 に答える
3

slick() の初期化に setTimeout を使用する

function slickCarousel() {
  setTimeout(function(){
    $('.skills_section').slick({
     infinite: true,
     slidesToShow: 3,
     slidesToScroll: 1
    });
  }, 100);
}
于 2016-11-22T05:22:49.643 に答える
0

このエラー メッセージは今まで見たことがありません。

stackoverflow の例の「slick-cloned」の 3 つのインスタンスは、単なるコピー/貼り付けエラーであると想定します。本当に「slick-cloned」が常に表示されている場合は、エラーがあります。unslick() メソッドは、プロセスの一部として、すべての「slick-cloned」スライドを削除する必要があります。すべてのスライドが削除される場合、それがスライドが null である理由です。

実際のjsファイルの627行目を読んで、これが行われていることを確認してください: https://github.com/kenwheeler/slick/blob/master/slick/slick.js

于 2015-01-13T18:24:36.273 に答える