search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.33k stars 5.88k forks source link

five or more dynamically added sliders in a single page #4193

Open shejinalt opened 2 years ago

shejinalt commented 2 years ago

I have 5 or more sliders in a single page. These slider's items are dynamically added from other side. But when I run page some of sliders not working ,only 4 or 5 is working correctly. But inside "slick-track" the items showing correctly

slick

ahmadalfy commented 2 years ago

My assumption is, the loop starts before all the dynamic sliders are added to the DOM. The best approach is to use a callback whenever a slider is added to the page. If you can share the link, that would be helpful.

shejinalt commented 2 years ago

it'n not forEach function, that's my old code. I included this on document.ready function. please follow my code.

`$(document).ready(function(){ $(".singleItem.with-custom-arrow") .not(".slick-initialized") .slick({ infinite: false, arrows: true, dots: true, centerMode: false, slidesToShow: 1, //adaptiveHeight: true, responsive: [ { breakpoint: 991, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, ], })

    setTimeout(() => {
        $(".singleItem.with-custom-arrow").not('.slick-initialized').slick('refresh');
    }, 0)

});`

ahmadalfy commented 2 years ago

If the sliders are added dynamically then there is a probability they are added after document.ready executes.