CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jShoop
jShoop

Reputation: 411

Infinitely Generated Slides but Not Looping

I want to create a date picker that is in the form of a slider. It displays five dates and you click the next button to see more future dates. I used slick slider as my base and I have JQuery populating the DIVs with dates.

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>',
    });

My problem is, I can't figure out how to generate the future dates on the fly (most likely with the button click). Slick has attributes that if you set infinite: false; then the slider stops at the last DIV you manually created on the HTML page. However, if infinite: true; then the slider loops.

My attempt to append DIVs within the slider:

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

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

A theory I had to solve this problem was to set the DIV text values as variable and then edit the variables on the fly in order to give the appearance that you're cycling through.

Does anyone have any other suggestions? Or tactics to solve this problem?

Thanks in advance!

Upvotes: 1

Views: 170

Answers (1)

VBeregovoy
VBeregovoy

Reputation: 29

You probably need read some documentation. http://kenwheeler.github.io/slick/ <- Add and remove section. Here is example of dynamic adding slides.

So you should use something like

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

Cause function .slick('slickAdd'), will properly update your slider instead just add one more element.

Upvotes: 1

Related Questions