29

私はカルーセルの実装に Slick を使用していますが、ページが読み込まれるとすべてが正常に動作します。

slick の呼び出しを関数に入れました

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

そして、成功のコールバック内で関数を呼び出します

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

しかし、関数は呼び出されていません。このjsを再初期化するにはどうすればよいですか?

4

11 に答える 11

15

これはうまくいくはずです。

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});
于 2015-06-04T21:38:16.890 に答える
3

ajax 呼び出しが開始される前にカルーセルをアンスリックする必要がありましたが、スリック カルーセルが既に存在するまでそれを行うことはできません。だから、私は変数を0に設定し、それが変更された後にのみunslickを実行します

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $('#ui-id-1').slick();
            slide++;

        }
于 2015-07-02T23:20:48.390 に答える
3

Slick カルーセルが新しいデータで更新されず、前のスライドに新しいスライドが追加されるという問題に直面していました。問題を解決する解決策を見つけました。非常に簡単です。

TL;DR unslick
を渡してみてから、slickカルーセル内でレンダリングされている新しいデータを割り当ててから、slick を再度初期化します。これらは私にとってのステップでした：

jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick-options});

注:
念のため、slick.js の Web サイトで構文を確認してください。また、slick が初期化される前に unslick を使用していないことを確認してください。つまり、最初の ajax 呼び出しをこのように初期化するだけ
jquery('.my-class').slick({slick-options})
です。初期化したら、上記の手順に従います。if-else を使いたいかもしれません。

于 2017-11-02T07:57:05.920 に答える
3

最善の方法はunslick、他の回答に記載されているように設定または機能を使用することです（スリックのバージョンに応じて）が、それは私にとってはうまくいきませんでした。これに関連していると思われるいくつかのエラーが slick から発生しています。

ただし、今のところうまくいったのは、次のように、slick を再初期化する前にコンテナからslick-initializedandクラスを削除することです。slick-slider

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

クラスを削除しても、破棄イベントが開始されるようには見えませんが (テストされていませんが意味があります)、後でslick()呼び出しが適切に動作するため、破棄時にトリガーがない限り、問題はありません。

于 2017-02-12T14:06:59.767 に答える
-1

リクエストを呼び出した後、タイムアウトを設定して滑らかなスライダーを初期化します。

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

開始時に滑らかなスライダーを初期化しないでください。タイムアウトのあるAJAXの後に初期化するだけです。それはあなたのために働くはずです。

于 2017-12-19T05:45:55.023 に答える