多项旋转木马引导4

Question

我想制作一个包含多件物品或图像的旋转木马，它会显示4个项目，然后当我按下一个新项目时会出现，依此类推。 此图像描述了我想要的内容：

我在互联网上尝试了几个代码，但所有这些代码都在bootstrap 3和jquery上。我想用bootstrap 4和jquery

我已经尝试了this code，但它无效

Answer 1

看看这个kenwheeler.github.io/slick它应该做你想做的事。

Answer 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