圆滑的传送带空白 [英] Slick Carousel Blank

问题描述

我设置了一个光滑的圆盘传送带，因此，当您单击图像时，会出现一个较大的圆盘传送带，并将所选图像作为initialSlide.但是，Slick轮播会在initialSlide之后添加几个空白幻灯片.仅当您从第三张幻灯片开始单击下一步时，才会出现空白.当您单击上一个按钮时，空白幻灯片不会出现.我在做什么错了?

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");
});

推荐答案

Jquery attr()函数返回一个字符串值.当您将其传递给光滑的构造函数时，它将转换为另一个数字.

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

添加一个简单的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");

这篇关于圆滑的传送带空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！