用于小图像的引导缩略图单个图像滑块（或用于更多图像）-Java 学习之路

-1

http://bootsnipp.com/snippets/featured/thumbnail-carousel-single-image-sliding

我正在上面的链接 . 它只适用于3张图片 . 但是，如果我需要显示超过3个图像，那么我也会获得BLANK空间 . 它只显示3张图像 .

这是因为我需要更改javascript，让我解决上面的问题 .

you can have a look at this image, i have changed div size to col-2

1 回答

您可以像这样更改javaScript：

$(document).ready(function () {
    $('#myCarousel').carousel({
        interval: 10000
    })
    $('.fdi-Carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }

         if (next.next().next().length > 0) {
            next.next().next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
         if (next.next().next().next().length > 0) {
            next.next().next().next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});

这适用于5张图像 . 如果你想要它超过5个图像，如6，那么再添加一个 if-else 条件 .

if (next.next().next().next().next().length > 0) {
        next.next().next().next().next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }

因为它计算其兄弟姐妹的长度 .

这是6个图像的工作代码，div大小 col-md-2

回复于 2024-05-02T08:01:11+08:00

用于小图像的引导缩略图单个图像滑块（或用于更多图像）

1 回答

相关问题