多项目轮播 bootstrap 4

Question

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

我在 Internet 上尝试了几个代码，但都在 bootstrap 3 和 jquery 上。我想要 bootstrap 4 和 jquery

我试过了this code但是没有用

Answer 1

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

Answer 2

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

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

演示：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

多项目轮播 bootstrap 4

Multi-item carousel bootstrap 4

jquery

carousel

bootstrap-4