那些遇到过的问题

Bootstrap轮播一次多个帧

rod*_*ira 101 jquery jquery-plugins carousel twitter-bootstrap-3 bootstrap-4

这是我试图用Bootstrap 3旋转木马实现的效果

在此输入图像描述

它不是一次只显示一帧,而是一起显示N帧.然后当您滑动(或自动滑动时),它会像幻灯片那样移动幻灯片组.

这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件......

Zim*_*Zim 132

更新2018年

Bootstrap 4

旋转木马在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);
}
Run Code Online (Sandbox Code Playgroud)

Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0(显示4,一次提前1)
Bootstrap 4.1.0(显示3,一次提前1)
Bootstrap 4.1.0(一次提前全部4)

另一种选择是响应式旋转木马,仅在较小的屏幕上显示和前进1张幻灯片.不像上一个例子那样克隆幻灯片,这个调整CSS并仅使用jQuery移动额外的幻灯片以允许连续循环(环绕):

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

Bootstrap 4响应(在移动设备上显示3个幻灯片)

@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>
Run Code Online (Sandbox Code Playgroud)

示例 - Bootstrap 4响应(在移动设备上显示4,1张幻灯片)

Bootstrap 3

以下是Bootply上的一个3.x示例:http://bootply.com/89193

您需要在项目中激活整行图像.这是另一个版本,它不会以较小的屏幕宽度堆叠图像:http://bootply.com/92514

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

使用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));
  }
});
Run Code Online (Sandbox Code Playgroud)

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

在3.3.1之前

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
Run Code Online (Sandbox Code Playgroud)

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);
}
Run Code Online (Sandbox Code Playgroud)

这将在时间显示3,但一次只能滑动一个:

Bootstrap 3.x演示

请不要复制并粘贴此代码.首先,了解它是如何工作的.这个答案可以帮助您学习.

加倍这个改进的bootstrap 4轮播只能正常运行一半(滚动循环停止工作)
如何在单页中制作2个自举滑块而不混合他们的CSS和jquery？
Bootstrap 4 Multi Carousel显示4个图像而不是3个

  • 谢谢.这确实看起来好多了......但感觉有点奇怪.滚动到左侧似乎不起作用,因为它一次滚动多个块,并且顺序似乎关闭.向右滚动工作正常(尽管方向错误).我遇到的问题是它似乎创造了很多副本,这并不是那么糟糕......但不是那么好......所以对于我拥有的每一个项目(在你的情况下为6),该脚本创建N个重复(其中N =每帧显示的块). (6认同)
  • @Zentaurus,我知道已经晚了,但请查看[四个元素示例](http://jsfiddle.net/aaccioly/Dv9FF/).我已经为[SOpt问题]改编了Skelly逻辑(http://pt.stackoverflow.com/questions/26186/como-passar-de-um-em-um-elemento-no-carousel0). (5认同)
  • 找到为什么它不能工作> 3.3.0它是由于包含translate3D,检查Danijel和Michal Vrchota的答案:http://stackoverflow.com/questions/18613271/twitter-bootstrap-carousel-display - 两个项 (3认同)
  • @Zim演示使1张幻灯片可见。我希望显示3或4（视屏幕大小而定），然后再显示1个项目。 (2认同)

yma*_*kux 27

所有上述解决方案都是hacky和buggy.甚至不尝试.使用其他库.我找到的最好的 - http://sachinchoolur.github.io/lightslider 适用于bootstrap,不添加垃圾html,高度可配置,响应迅速,适合移动设备等...

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

  • 这是一个死项目，有太多未解决的问题。（检查他们的github） (3认同)

pau*_*dru 20

这是一个有效的twitter bootstrap 3.

这是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));
    }
});
Run Code Online (Sandbox Code Playgroud)

和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;      }
Run Code Online (Sandbox Code Playgroud)

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

我之所以添加这个答案是因为其他答案并不完全有用.我发现它们里面有2个漏洞,其中一个是左箭头产生了一种奇怪的效果,另一个是关于文本在某些情况下变得粗体可以通过设置背景颜色来解决,因此在转换时底部项目不可见影响.

Ron*_*ald 17

这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件

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

CPH*_*hon 9

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

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

.carousel-inner .carousel-item {
    margin-right: inherit;
}
Run Code Online (Sandbox Code Playgroud)

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

小智 6

这对我有用.非常简单的jQuery和CSS使响应式轮播在同一页面上独立于轮播工作.高度可定制,但基本上是一个带有white-space 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());
});
Run Code Online (Sandbox Code Playgroud) 
@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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

jos*_*oto 5

本质上，仅使用Bootstrap 3.4 Carousel和Bootstrap 4.5 Carousel javascript 组件功能来实现这一点过于复杂和混乱。

好吧，所以你不需要另一个jQuery 插件......我明白了。

在我看来，如果您已经被迫在项目中使用 jQuery，那么您可能还需要一个像样的 jQuery 轮播插件，其中包含许多强大的选项。

slick.js - 您需要的最后一个轮播 - Ken Wheeler

         _ _      _       _
     ___| (_) ___| | __  (_)___
    / __| | |/ __| |/ /  | / __|
    \__ \ | | (__|   < _ | \__ \
    |___/_|_|\___|_|\_(_)/ |___/
                       |__/
Run Code Online (Sandbox Code Playgroud)

它确实是您需要的最后一个 jQuery 轮播插件。


以下是缩小的slick.js发行版大小...


您可能会遇到的一些场景...

  • 不幸的是，如果您只是从 CDN 或任何地方提取分布式 Bootstrap 3 或 4js以及缩小的文件，那么它是另一个添加到您网站网络请求的庞大 jQuery 插件。css
  • 如果您使用 NPM、Gulp、Bower 或其他任何工具，您可以排除 Bootstrapscarousel.js和供应商，以减少最终编译的文件carousel.scss大小。无论如何，排除所有未使用的 Bootstrap和供应商将有助于减少最终编译的输出文件。cssjsjsscss

使用slick.js添加奖励...

  • 触摸/滑动以在设备上滚动轮播（您也可以在桌面上拖动）
  • 为每个响应断点定义轮播选项
  • 设置mobileFirst: true或false处理响应断点方向
  • 设置您希望显示或滚动的幻灯片（列）数量（为每个断点定义）
  • 垂直和水平旋转木马
  • .on一切事件
  • 大量的选择


Bootstrap 3 多列光滑轮播示例

请参阅下面的codepen链接以响应式测试示例...

// bootstrap 3 breakpoints 
const breakpoint = {
  // extra small screen / phone
  xs: 480,
  // small screen / tablet
  sm: 768,
  // medium screen / desktop
  md: 992,
  // large screen / large desktop
  lg: 1200
};

// bootstrap 3 responsive multi column slick carousel
$('#slick').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  draggable: true,
  pauseOnHover: false,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 1000,
  
  mobileFirst: true,
  
  slidesToShow: 1,
  slidesToScroll: 1,
  
  responsive: [{
      breakpoint: breakpoint.xs,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    }
  ]
});
Run Code Online (Sandbox Code Playgroud) 
/* .slick-list emulates .row */
#slick .slick-list {
  margin-left: -15px;
  margin-right: -15px;
}

/* .slick-slide emulates .col- */
#slick .slick-slide {
  padding-right: 15px;
  padding-left: 15px;
}

#slick .slick-slide:focus {
  outline: none;
}
Run Code Online (Sandbox Code Playgroud) 
<!-- jquery 3.3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<!-- bootstrap 3 responsive multi column slick carousel example -->

<header>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-header" style="float:left!important;">
      <a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
    </div>
    <div class="navbar-text pull-right" style="margin:15px!important;">
      <a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
    </div>
  </nav>
</header>

<main>
  <div class="container">
    <div id="slick">

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>
      
      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>
Run Code Online (Sandbox Code Playgroud)


Bootstrap 4 多列光滑轮播示例

请参阅下面的codepen链接以响应式测试示例...

// bootstrap 4 breakpoints
const breakpoint = {
  // small screen / phone
  sm: 576,
  // medium screen / tablet
  md: 768,
  // large screen / desktop
  lg: 992,
  // extra large screen / wide desktop
  xl: 1200
};

// bootstrap 4 responsive multi column slick carousel
$('#slick').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  draggable: true,
  pauseOnHover: false,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 1000,
  
  mobileFirst: true,
  
  slidesToShow: 1,
  slidesToScroll: 1,
  
  responsive: [{
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    }
  ]
});
Run Code Online (Sandbox Code Playgroud) 
/* .slick-list emulates .row */
#slick .slick-list {
  margin-left: -15px;
  margin-right: -15px;
}

/* .slick-slide emulates .col- */
#slick .slick-slide {
  padding-right: 15px;
  padding-left: 15px;
}

#slick .slick-slide:focus {
  outline: none;
}
Run Code Online (Sandbox Code Playgroud) 
<!-- jquery 3.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>

<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<!-- bootstrap 4 responsive multi column slick carousel example -->
    
<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
    <a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
  </nav>
</header>

<main class="py-4">
  <div class="container">
    <div id="slick">

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>
      
      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-bo

归档时间：

查看次数：

275474 次

最近记录：

6 年，4 月 前
Twitter Bootstrap Carousel显示两项 5
更多相关链接
相关归档
内容安全策略:页面的设置阻止了资源的加载 60
使用JavaScript/jQuery删除或替换样式表(<link>) 53
twitter bootstrap 3 jquery最低版本 53
来自jQuery Ajax的Bool参数在PHP中作为文字字符串"false"/"true"接收 39
如果文件存在,则更改图像源 17
极端差异日期的最佳jQuery日期插件(1000 + BC - 今天) 7
Bootstrap3 CSS样式输入 6
如何在引导程序 4 中将文本和按钮置于同一行 6
如何将滑块步进值设置为某些固定值？ 4
Bootstrap 3列在一行中相同的高度 2
难疑归档
如何从异步调用返回响应？ 5208
不同浏览器中URL的最大长度是多少？ 4676
如何水平居中<div>？ 4116
什么时候使用自我超过$？ 1948
使当前的Git分支成为主分支 1555
在Bash中循环遍历一串字符串？ 1371
在HTML中嵌入PDF的推荐方法？ 1128
如何从"Bobby Tables"XKCD漫画中注入SQL？ 1070
如何测量函数执行所花费的时间 1057
iOS 6上的Safari缓存$ .ajax结果吗？ 1057
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号