javascript - 无限生成幻灯片但不循环

Question

我想创建一个 slider 形式的日期选择器。它显示五个日期，您单击下一步按钮以查看更多 future 日期。我用了slick slider作为我的基础，我让 JQuery 用日期填充 DIV。

HTML

 <div class="carousel-items">
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div>
    <div class="date-carousel-other slider"></div>
</div>

JQuery

var value = moment().subtract(2,'days');

$(".slider").each(function() {
    var dayFormatted = moment(value).format("DD" + "<br/>" + "MMMM");
    $(this).html(dayFormatted);
    value = value.add(1,'days');
});

$('.carousel-items').slick({
        dots: false,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 1,
        accessibility:true,
        arrows:true,
        lazyLoad: "progressive",
        prevArrow: '<button class="slick-prev date-carousel-back"></button>',
        nextArrow: '<button class="slick-next date-carousel-forward"></button>',
    });

我的问题是，我不知道如何即时生成 future 日期(很可能是通过单击按钮)。 Slick 具有如果您设置的属性 infinite: false; 然后 slider 会停在您在 HTML 页面上手动创建的最后一个 DIV 处。但是，如果 infinite: true; 则 slider 循环。

我尝试在 slider 中附加 DIV:

$('.slick-next').click(function(){

   $(".carousel-times").append('"<div class="date-carousel-other slider">test</div>"');
        });

我必须解决这个问题的一个理论是将 DIV 文本值设置为变量，然后动态编辑变量以提供您正在循环的外观。

有没有人有任何其他建议？或者解决这个问题的策略？

提前致谢!

Answer 1

您可能需要阅读一些文档。 http://kenwheeler.github.io/slick/ <- 添加和删除部分。这是动态添加幻灯片的示例。

所以你应该使用类似的东西

$('.slick-next').on('click', function() {
    $(".carousel-times").slick('slickAdd','<div class="date-carousel-other slider">test</div>');
});

因为函数 .slick('slickAdd') 会正确更新您的 slider ，而不是再添加一个元素。