多项目轮播引导程序 4答案

【问题标题】：Multi-item carousel bootstrap 4多项目轮播引导程序 4
【发布时间】：2017-05-06 05:49:06
【问题描述】：

我想制作一个包含多个项目或图像的轮播，它会显示 4 个项目，然后当我按下下一个时，会出现一个新项目，依此类推。这张图片描述了我想要的：

我在 Internet 上尝试了几个代码，但它们都在 bootstrap 3 和 jquery 上。我想要它与 bootstrap 4 和 jquery 一起使用

我试过this code 但没用

【问题讨论】：

看看这个kenwheeler.github.io/slick它应该做你想做的事。
maaaan thaaaaank 你，你真的是一个救生员
没问题。乐意效劳。生病发布作为答案。也许你可以标记为答案

标签： jquery carousel bootstrap-4

【解决方案1】：

查看这个 kenwheeler.github.io/slick 它应该可以满足您的需求。

【讨论】：

【解决方案2】：

这是一个更简单的解决方案，仅使用 Bootstrap 4...

添加一个特殊的 CSS 类（即：active-next）以与active 类相同的方式显示项目。当轮播更新活动幻灯片时，将类添加到下一个项目。然后使用媒体查询仅在较大宽度上应用特殊类。

演示：http://www.codeply.com/go/Q26U8fJDbx

CSS

@media (min-width: 768px) {
    .carousel-item.active-next {
        display: flex;
    }
}

jQuery

$('#mySlider').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  $e.removeClass('active-next');

  var $next = $e.next();
  if ($next.length===0){
      $next = $('.carousel-item').eq(0);
  }
  var $nextnext = $e.next().next();
  if ($nextnext.length===0){
      $nextnext = $('.carousel-item').eq(1);
  }
  $next.addClass('active-next');
  $nextnext.addClass('active-next');
});

Demo Bootstrap 4

【讨论】：