【问题标题】: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 的图像的工作代码

【讨论】:

    猜你喜欢
    • 2017-06-05
    • 1970-01-01
    • 2014-05-05
    • 2012-01-27
    • 2017-11-24
    • 2011-09-18
    • 2013-08-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多