无限生成幻灯片但不循环

我想创建一个滑块形式的日期选择器。它显示五个日期，然后单击下一个按钮查看更多未来日期。我使用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文本值作为变量，然后编辑在飞行中的变量，以给你正在骑自行车的外观。

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

在此先感谢！

来源

2015-06-16 coozin

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

所以，你应该使用类似

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

原因函数.slick（“slickAdd”），将正确地更新您的滑块，而不是仅仅增加一个元素。

来源

2015-06-16 13:50:10 VBeregovoy

无限生成幻灯片但不循环

回答

相关问题