Slick plugin не работает для динамически созданного контента, но хорошо работает для статического контента

<dynamically created="" div2="">
<dynamically created="" div3="">
<dynamically created="" div4="">
$(document).ready(function(){
 $('.scroll-footer').slick({
 slidesToShow: 2,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,
 arrows: true
 })
 });
</dynamically></dynamically></dynamically>

мы добавили slick class в id1 div динамически, но он не работает? Как добавить класс slick после загрузки динамически созданного div1, div 2etc??

3 ответа

Вам нужно снова инициализировать функцию при добавлении динамического элемента

Предложите вам сделать это

function sliderInit(){
 $('.scroll-footer').slick({
 slidesToShow: 2,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,
 arrows: true
 });
};
sliderInit();

Вызвать функцию здесь для загрузки функции по умолчанию и вызвать ту же функцию sliderInit(), где вы добавляете динамический элемент.

ПРИМЕЧАНИЕ. Не забудьте записать эту функцию после добавления элемента.


У меня также есть тот же вопрос,

и вот как я его решаю.

Вам нужно .slick( "unclick" ) сначала

$('.portfolio-thumb-slider').slick("unslick"); $('.portfolio-item-slider').slick({ slidesToShow: 1, adaptiveHeight: false, //put whatever you need });

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


Существует метод для такого рода вещей. Как документация заявляет:

slickAdd html или объект DOM, индекс, addBefore Добавьте слайд. Если указатель предоставляется, будет добавлен в этот индекс или раньше, если будет установлен параметр addBefore. Если индекс не указан, добавьте его до конца или в начало, если установлено значение addBefore. Принимает HTML-строку || Объект

Я бы сделал это следующим образом:

$('#id1').slick(); 
$.ajax({
 url: someurl,
 data: somedata,
 success: function(content){
 var cont=$.parseHTML(content); //depending on your server result
 $(cont).find('.dynamically.created.div').each(function(){
 $('#id1').slick('slickAdd', $(this));
 })
 }
})

licensed under cc by-sa 3.0 with attribution.