Bootstrap Multiple Items Carousel(一次显示多个轮播项目) [英] Bootstrap Multiple Items Carousel (several carousel items shown at once)

问题描述

如何在 Bootstrap 4 中实现多项目轮播?文档提到了多个轮播，但没有提到包含多个项目的轮播.

How do you implement a multiple items carousel in Bootstrap 4? The docs mention about multiple carousels but not a carousel with multiple items.

推荐答案

您可以一次显示一个轮播项目，但用多个元素填充它.类似的东西:

You can display one carousel item at a time, but fill it with multiple elements. Something like:

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

但是您可能希望一次推进一项.开箱即用的引导程序不会发生这种情况.在实现了许多轮播之后，我建议在 Bootstrap 不符合要求时寻找另一个轮播库.Slick.js 是我的许多轮播配置选项的首选库.它是一个相当纤薄的 ~5k min'd 和 gzip 压缩包.

But you may then be wishing you could advance them one at a time. That isn't going to happen with bootstrap right out of the box. After implementing many carousels, I'd recommend seeking another carousel library when Bootstrap's doesn't fit the bill. Slick.js is my go-to lib for lots of carousel config options. And its a fairly slim ~5k min'd and gzipped.

如果您对使用 bootstrap 很不满意，这里有一个脚本可以提供单次提前、多项目:http://codepen.io/MarkitDigital/pen/ZpEByz

If you're hard-set on using bootstrap, here is a script that can provide single advance, multi-items: http://codepen.io/MarkitDigital/pen/ZpEByz

这篇关于Bootstrap Multiple Items Carousel(一次显示多个轮播项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！