web-dev-qa-db-ja.com

ajax呼び出しが成功した後、Slick jsを再初期化する

カルーセルの実装に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を再初期化するにはどうすればよいですか？

javascriptjqueryajaxslick.js
18
Richlewis

Unslickメソッドを使用する必要があります。

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  }
});
16
Minoru

最適な方法は、スリックスライダーを再初期化した後に破棄することです。

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($('.skills_section').hasClass('slick-initialized')) {
    $('.skills_section').slick('destroy');
  }      
}

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

これは動作するはずです。

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});
13
jdavid.net

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++;

        }
3
A.Clifford

注：これが正しいかどうかはわかりませんが、試してみて、これが機能するかどうかを確認できます。

カルーセルを初期化解除するunslickメソッドがあります。そのため、再初期化する前にそれを使用してみてください。

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

お役に立てれば。

3
web-nomad

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

ただし、今のところ機能しているのは、slick-initializedおよびslick-slider次のように、slickを再初期化する前にコンテナからクラスを取得します。

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

クラスを削除してもdestroyイベントは開始されないようですが（テストされていませんが、意味があります）、後でslick()呼び出しが正しく動作するようにします。良い。

2
Tejas Kemkar

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

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

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

注：念のため、構文については滑らかなウェブサイトを確認してください。また、slickが初期化される前にunslickを使用していないことを確認してください。つまり、単に初期化するだけです（このjquery('.my-class').slick({options}など）。最初のajax呼び出しで初期化されたら、上記の手順に従ってください。

1
Junaid

行くぞ、みんな！助けてくれた

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});
1
Dmitry Shulga
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
0
Mihir Bhatt

このコードを試してください、それは私を助けました！

$('.slider-selector').not('.slick-initialized').slick({
  dots: true,
  arrows: false,
  setPosition: true
});
0
Lahiru Dilshan

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

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の後にタイムアウトを設定して初期化するだけです。

0
Tijan Manandhar