Reinitialize Slick Js After Successful Ajax Call

function getSliderSettings(){        return {            slidesToShow: 1,            slidesToScroll: 1,            rows: 2,            slidesPerRow: 3,            centerMode: false,            arrows: false,            dots: true,            infinite: false,            responsive: [                {                    breakpoint: 1100,                    settings: {                        slidesPerRow: 2,                        slidesToScroll: 1                    }                }            ]        }    }$("#categorySlider-13").slick(getSliderSettings());
$('#btn1').on('click',function(){
var data = "<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>";$("#categorySlider-13").slick('unslick')$("#categorySlider-13").html(data);$("#categorySlider-13").not('.slick-initialized').slick(getSliderSettings());});

$c1: #3a8999;$c2: #e84a69;
.slider {    width: auto;    margin: 30px 50px 50px;}
.slick-slide {    background:  #3a8999;    color: white;    padding: 40px 0;    font-size: 30px;    font-family: "Arial", "Helvetica";    text-align: center;}
.slick-prev:before, .slick-next:before {    color: black;    }
.slick-dots {    bottom: -30px;}
.slick-slide:nth-child(odd) {     background:  #e84a69;}

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/><link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section id ="categorySlider-13" class="slider">    <div>slide1</div>    <div>slide2</div>    <div>slide3</div>    <div>slide4</div>    <div>slide5</div>    <div>slide6</div></section>
<button id="btn1" >Click me!!</button>

DOM not updating after changing slick-carousel's html with ajax

You should be doing slickAdd and slickRemove each time you load data

setInterval(function(){
            $.ajax({
                url: '../class/Erection.php?createView=1',
                success: function (html) {
                   $('.erection-carousel').slick('slickRemove',0); //remove elements starting with child 0
                   $('.erection-carousel').slick('slickAdd',html); //re-add new html
                },
                type: 'GET'
            });
        }, 5000);

---

Related Topics