Question

我想创建一个滑块形式的日期选择器。它显示五个日期，然后单击下一个按钮以查看更多未来日期。我使用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>',
    });

我的问题是，我无法弄清楚如何动态生成未来日期（最有可能是点击按钮）。光滑具有属性，如果你设置 infinite: false;然后滑块停在您在HTML页面上手动创建的最后一个DIV。但是，如果infinite: true;则滑块循环。

我尝试在滑块中附加DIV：

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

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

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

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

提前致谢！

Answer 1

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

所以你应该使用像

这样的东西

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

原因功能.slick（＆＃39; slickAdd＆＃39;）会正确更新滑块，而只需再添加一个元素。

无限生成的幻灯片但不循环播放

1 个答案: