Javascript 引导传送带-显示在不同资源上的项目数

我想使用引导转盘以不同的屏幕分辨率显示不同数量的项目

例如：

当屏幕分辨率大于1000px时，我想显示3个联系人的详细信息

当屏幕分辨率在600px和999px之间时，我想显示2个联系人的详细信息

最后，当屏幕分辨率小于600px时，我想显示单个联系人的详细信息

---

提前谢谢你的帮助。我已经在这上面呆了好几天了。

使用

隐藏的sm

和

隐藏的md

类。

首先，我们需要

项

类在旋转木马中显示项，但是对于这种方法，我们在DOM中不使用

项

类，而是在加载窗口后，根据屏幕分辨率创建它。非常适合我。根据我的要求，我不能少于768像素，所以你可以根据你的要求进行更新

注意：仅适用于页面加载，不适用于窗口大小调整。

JS

var itemscounttovisible=1；
var w=窗内宽度；
控制台日志（w）；
如果（w>768&&w 980）
ItemScontToVisible=5；
如果（w==768）
ItemScontToVisible=3；
如果（w<768）
ItemScontToVisible=2；
$（'.carousel'）。每个（函数（索引，Obj）{
id=$（Obj.attr（'id'））
myArray=$（'#'+id+'>.carousel-inner>a'）；
对于（var q=0；q

---

适用于Bootstrap 4的易于实施的解决方案。将从“data-”获取元素计数，并从JS获取断点

（函数（$）{
函数calcStepSize（选项节点）{
var breakM=990；
var=768；
变量宽度=$（窗口）.innerWidth（）；
如果（宽度<断开）{
var键='s'；
}否则，如果（宽度0？cnt:1；
}
函数重新分区（容器、项、计数）{
container.children（）.remove（）；
对于（变量i=0；ivar cBlock=$（“这里有一个更简单的解决方案。添加一个特殊的CSS类（即：
活动的下一个
），以与
活动的
类相同的方式显示项目。当旋转木马更新活动的幻灯片时，将该类添加到下一个项目。然后使用媒体查询仅在较大的宽度上应用特殊类

演示：

CSS

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');
});

这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论-您可以随时在自己的帖子上发表评论，一旦您有足够的评论，您就可以发表评论。这就是问题所在，我需要有50%的声誉才能添加评论。这就是为什么我不需要提供任何信息的原因o添加一个答案，然后等待它被升级，这真的很不方便。
$('#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');
});