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

【问题标题】：bootstrap thumbnail single image slider for small images (or for more number of images)用于小图像（或更多图像）的引导缩略图单图像滑块
【发布时间】：2016-10-31 17:21:10
【问题描述】：

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

我正在处理上面的链接。仅适用于 3 张图像。但是，如果我需要显示 3 张以上的图像，那col-md-2 图像我也会得到空白空间。它仅显示 3 张图像。

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

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

【问题讨论】：

您能提供实时预览吗？
请尽快回复..
实时预览是什么意思？？检查上面的链接，在 html 中，只需将 col-md-4 更改为 col-md-2，您将获得预览。
我们需要实时预览，无需使用开发控制台即可轻松编辑。 JS Fiddle 或 Codepen 将是理想的选择。如果没有我们可以轻松编辑的内容，您将不会在这里获得太多帮助。
您可以在bootsnipp.com/snippets/featured/… 中编辑它在小提琴中不起作用..

标签： javascript jquery css twitter-bootstrap thumbnails

【解决方案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 的图像的工作代码

【讨论】：