Reinitialize Slick js после успешного вызова ajax

Я использую Slick для реализации карусели, и все работает нормально, когда загружаются страницы. Что я пытаюсь достичь, так это то, что когда я делаю вызов Ajax для извлечения новых данных, я все еще хочу реализовать реалистичную карусель, на данный момент я потеряйте его.

Я поместил вызов 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?

Ответ 1

Вы должны использовать метод unlick:

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 */
  }
});

Ответ 2

Это должно работать.

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

Ответ 3

Лучший способ - вы должны уничтожить слайдер после повторной инициализации.

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();
  }
});

Ответ 4

Примечание. Я не уверен, что это правильно, но вы можете попробовать и посмотреть, работает ли это.

Существует метод unslick, который деинизирует карусель, поэтому вы можете попробовать использовать это перед повторной инициализацией.

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

Надеюсь, что это поможет.

Ответ 5

Мне пришлось расстегнуть карусель до того, как начнется вызов ajax, но вы не сможете этого сделать, пока не появится пятно карусели. Итак, я устанавливаю переменную в 0 и запускаю unlick после ее изменения

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

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

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

        }

Ответ 6

Лучшим способом было бы использовать настройку или функцию 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() должен вести себя должным образом, до тех пор, пока у вас нет триггеров для уничтожения, вы должны быть хорошим.

Ответ 7

Я столкнулся с проблемой, когда карандаш Slick не обновлялся по новым данным, он добавлял новые слайды к предыдущим, я нашел ответ, который решил мою проблему, это очень просто.

попробуйте unlick, затем назначьте свои новые данные, которые отображаются внутри пятнистой карусели, а затем снова инициализируйте пятно. это были шаги для меня:

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

Примечание. Проверяйте веб-сайт пятна для синтаксиса на всякий случай. также убедитесь, что вы не используете unslick, прежде чем пятно будет даже инициализировано, что означает просто инициализация (например, это jquery('.my-class').slick({options}); первый вызов ajax и как только он инициализируется, выполните следующие шаги, вы можете использовать, если else

Ответ 8

Вот и мы, ребята! Это помогло мне

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});

Ответ 9

После вызова запроса установите таймаут для инициализации слайдера.

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 с таймаутом. Это должно сработать для вас.

Ответ 10

$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

Ответ 11

Попробуйте этот код, он мне помог!

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