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

Question

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

我正在处理以上 link。仅适用于 3 张图像。但是，如果我需要显示 3 张以上的图像，那也是 col-md-2 个图像，我将得到空白 space。它仅显示 3 张图片。

这是因为我需要更改javascript，让我解决上述问题。

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

Answer 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

图像的工作代码