Slick JS - 如何使用 ajax 数据重新加载内容

Question

我在slick js slider

中有数据

我想reload另一个数据并reinit使用新数据。

我试过了：

函数如下：

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
                    }
                }
            ]
        }
    }

重新初始化滑块的代码

var data = "<div>a</div><div>b</div>";
$("#categorySlider-13").slick('reinit');
$("#categorySlider-13").html(data);
$("#categorySlider-13").slick(getSliderSettings());

但是没用！

如果你知道另一个与 ajax 调用一起工作的 js 插件轮播，你能告诉我吗？

Answer 1

您需要在分配新数据之前调用 $("#categorySlider-13").slick('unslick') 然后再次初始化。

此外，它建议使用 .not('.slick-initialized')，所以你不小心初始化了滑块不止一次 See here for more

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>

Slick JS - 如何使用 ajax 数据重新加载内容

Slick JS - How to reload content with ajax data

javascript

slick.js