jQuery Bootstrap 轮播一次多帧

Question

提问by rodrigo-silveira

This is the effect I'm trying to achieve with Bootstrap 3 carousel

这是我试图用 Bootstrap 3 carousel 实现的效果

enter image description here

在此处输入图片说明

Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does.

它不是一次只显示一帧，而是并排显示 N 帧。然后，当您滑动时（或自动滑动时），它会像这样移动幻灯片组。

Can this be donewith bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin...

这可以用 bootstrap 3 的轮播完成吗？我希望我不必再去寻找另一个 jQuery 插件......

Answer 1

采纳答案by Ronald

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin

这可以用 bootstrap 3 的轮播完成吗？我希望我不必再去寻找另一个 jQuery 插件

As of 2013-12-08 the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want http://sorgalla.com/jcarousel/

截至 2013-12-08，答案是否定的。使用 Bootstrap 3 的通用轮播插件无法实现您正在寻找的效果。但是，这里有一个简单的 jQuery 插件，它似乎完全符合您的要求http://sorgalla.com/jcarousel/

Answer 2

回答by Zim

Updated 2019...

2019 年更新...

Bootstrap 4

引导程序 4

The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this...

轮播在 4.x 中发生了变化，可以像这样覆盖多幻灯片动画过渡...

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (show 4, advance 1 at a time)
Bootstrap 4.1.0 (show 3, advance 1 at a time)
Bootstrap 4.1.0 (advance all 4 at once)
Bootstrap 4.3.1 responsive (show multiple, advance 1)new
Bootstrap 4.3.1 carousel with cardsnew

Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0（显示 4，一次推进 1）
Bootstrap 4.1.0（显示 3，一次推进 1）
Bootstrap 4.1.0（一次推进所有 4）
Bootstrap 4.3.1 响应式（显示多个，提前 1）new
Bootstrap 4.3.1 carousel with cardnew

Another option is a responsivecarousel that only shows and advances 1 slide on smaller screens, but shows multiple slides are larger screens. Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQuery only to move the extra slides to allow for continuous cycling (wrap around):

另一种选择是响应式轮播，它只在较小的屏幕上显示和推进1 张幻灯片，但在较大的屏幕上显示多张幻灯片。不是像上一个示例那样克隆幻灯片，而是调整 CSS 并使用 jQuery 仅移动额外的幻灯片以允许连续循环（环绕）：

Please don't just copy-and-paste this code. First, understand how it works.

请不要只是复制并粘贴此代码。首先，了解它是如何工作的。

Bootstrap 4 Responsive (show 3, 1 slide on mobile)

Bootstrap 4 响应式（在移动设备上显示 3、1 张幻灯片）

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Example - Bootstrap 4 Responsive (show 4, 1 slide on mobile)
Example - Bootstrap 4 Responsive (show 5, 1 slide on mobile)

示例 - Bootstrap 4 响应式（在移动设备上显示 4、1 张幻灯片）
示例 - Bootstrap 4 响应式（在移动设备上显示 5、1 张幻灯片）

Bootstrap 3

引导程序 3

Here is a 3.x example on Bootply: http://bootply.com/89193

这是 Bootply 上的 3.x 示例：http://bootply.com/89193

You need to put an entire row of images in the item active. Here is another version that doesn't stack the images at smaller screen widths: http://bootply.com/92514

您需要将整行图像放入活动项中。这是另一个不以较小的屏幕宽度堆叠图像的版本：http: //bootply.com/92514

EDITAlternative approach to advance one slide at a time:

编辑一次推进一张幻灯片的替代方法：

Use jQuery to clone the next items..

使用 jQuery 克隆下一个项目..

$('.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));
  }
});

And then CSS to position accordingly...

然后CSS相应地定位......

Before 3.3.1

3.3.1之前

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }

After 3.3.1

3.3.1之后

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}
.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}
.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left { 
  transform: translateX(0);
}

This will show 3 at time, but only slide oneat a time:

这将一次显示 3 个，但一次只能滑动一个：

Bootstrap 3.x Demo

Bootstrap 3.x 演示

Please don't copy-and-paste this code. First, understand how it works.This answer is here to help you learn.

请不要复制并粘贴此代码。首先，了解它是如何工作的。此答案旨在帮助您学习。

Doubling up this modified bootstrap 4 carousel only functions half correctly (scroll loop stops working)
how to make 2 bootstrap sliders in single page without mixing their css and jquery?
Bootstrap 4 Multi Carousel show 4 images instead of 3

将这个修改过的 bootstrap 4 carousel 加倍只能正确运行一半（滚动循环停止工作）
如何在单页中制作 2 个 bootstrap 滑块而不混合它们的 css 和 jquery？
Bootstrap 4 Multi Carousel 显示 4 个图像而不是 3 个

Answer 3

回答by ymakux

All the above solutions are hacky and buggy. Don't even try. Use other libs. The best I have found - http://sachinchoolur.github.io/lightsliderWorks great with bootstrap, does not add junk html, highly-configurable, responsive, mobile-friendly etc...

以上所有解决方案都是hacky和buggy。甚至不要尝试。使用其他库。我发现的最好的 - http://sachinchoolur.github.io/lightslider适用于引导程序，不添加垃圾 html，高度可配置，响应迅速，移动友好等......

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 0
});

Answer 4

回答by paulalexandru

Thisis a working twitter bootstrap 3.

这是一个有效的 twitter bootstrap 3。

Here is the javascript:

这是javascript：

$('#myCarousel').carousel({
    interval: 10000
})

$('.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));
    }
});

And the css:

和css：

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

You can see it in action at this Jsfiddle

你可以在这个Jsfiddle 上看到它的实际效果

The reason i added this answer because the other ones don't work entirely. I found 2 bugs inside them, one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect.

我添加这个答案的原因是因为其他答案并不完全有效。我在其中发现了 2 个错误，其中一个是左箭头产生了奇怪的效果，另一个是关于文本在某些情况下变粗的问题，可以通过设置背景颜色来解决，这样在过渡时底部项目就不会可见影响。

Answer 5

回答by Ronald

This is what worked for me. Very simple jQuery and CSS to make responsive carousel works independently of carousels on the same page. Highly customizable but basically a div with white-space nowrap containing a bunch of inline-block elements and put the last one at the beginning to move back or the first one to the end to move forward. Thank you insertAfter!

这对我有用。非常简单的 jQuery 和 CSS 使响应式轮播在同一页面上独立于轮播工作。高度可定制，但基本上是一个带有空白 nowrap 的 div，其中包含一堆内联块元素，并将最后一个放在开头以向后移动或将第一个放在结尾以向前移动。谢谢insertAfter！

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});

@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

Answer 6

回答by CPHPython

Update 2019-03-06 -- Bootstrap v4.3.1

更新 2019-03-06 -- Bootstrap v4.3.1

It seems the new Bootstrap version adds a margin-right: -100%to each item, therefore in the responsive solution given in the most upvoted answer in here, this property should be reset, e.g.:

似乎新的 Bootstrap 版本margin-right: -100%为每个项目添加了一个，因此在此处最受好评的答案中给出的响应式解决方案中，应重置此属性，例如：

.carousel-inner .carousel-item {
    margin-right: inherit;
}

A working codepen with v4.3.1 in LESS.

在 LESS 中使用 v4.3.1的工作代码笔。

Answer 7

回答by Luke Skywalker

The most popular answer is right but I think the code is uselessly complicated. With the same css, this jquery code is easier to understand I believe:

最受欢迎的答案是正确的，但我认为代码非常复杂。使用相同的 css，这个 jquery 代码更容易理解我相信：

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function() {
  var item = $(this);
  item.siblings().each(function(index) {
    if (index < 4) {
      $(this).children(':first-child').clone().appendTo(item);
    }
  });
});

Answer 8

回答by Prashant Shastri

try this.....it work in mine.... code:

试试这个......它在我的工作...... 代码：

<div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
            <div class="item">
                 <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
        </div>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 9

回答by Bass Jobsen

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
        $(".item.active:last-child").insertBefore($(".item:first-child"));
    });

        .item.active,
        .item.active + .item,
        .item.active + .item  + .item {
           width: 33.3%;
           display: block;
           float:left;
        }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=2">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=3">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=4">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=5">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=6">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=7">
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

Answer 10

回答by IVIR3zaM

I've seen your question and answers, and made a new responsive and flexible multi items carousel Gist. you can see it here:

我已经看到您的问题和答案，并制作了一个新的响应式和灵活的多项目轮播 Gist。你可以在这里看到它：

https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e

jQuery Bootstrap 轮播一次多帧

提问by rodrigo-silveira

采纳答案by Ronald

回答by Zim

回答by ymakux

回答by paulalexandru

回答by Ronald

回答by CPHPython

Update 2019-03-06 -- Bootstrap v4.3.1

更新 2019-03-06 -- Bootstrap v4.3.1

回答by Luke Skywalker

回答by Prashant Shastri

回答by Bass Jobsen

回答by IVIR3zaM

相关推荐

最近更新

标签

jQuery Bootstrap 轮播一次多帧

提问by rodrigo-silveira

采纳答案by Ronald

回答by Zim

回答by ymakux

回答by paulalexandru

回答by Ronald

回答by CPHPython

Update 2019-03-06 -- Bootstrap v4.3.1

更新 2019-03-06 -- Bootstrap v4.3.1

回答by Luke Skywalker

回答by Prashant Shastri

回答by Bass Jobsen

回答by IVIR3zaM

相关推荐

jQuery 在没有 Web 服务器的情况下使用 Javascript 加载本地文件

jQuery 我想在引导程序中使用多选，也称为选择

jQuery select2 获取 select 标签的值？

如何在 JQuery Datetimepicker 插件中只显示日期？

相关推荐

最近更新

标签