Slick Carousel Blank

问题:

I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong?

$("#sync1 .item").on("click", function() {

    var index = $(this).attr("data-slick-index");
    $(".overlay-carousel-container").css("display", "block");
    $("body").css("overflow", "hidden");
    $("#overlayCarousel").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        initialSlide: index,
        focusOnSelect: true
    });
})
$(".close").on("click", function() {
    $(".overlay-carousel-container").css("display","none");
    $("body").css("overflow", "inherit");
    $("#overlayCarousel").slick("unslick");
    $("#executiveOverlay").slick("unslick");
});

回答1:

The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.

Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:

var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");

回答2:

This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.

1. Very old
2. To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
3. Several other issues like the one mentioned here and other I found over stack flow.

The best one I resorted to for similar process is the one mentioned here it's latest and comes with a simple tutorial as well

Recommended for new beginner developers.