减少移动设备的 Bootstrap 3 轮播中的项目数量答案

【问题标题】：Reducing the number of items in a Bootstrap 3 carousel for mobile减少移动设备的 Bootstrap 3 轮播中的项目数量
【发布时间】：2014-09-12 16:17:33
【问题描述】：

我目前正在使用 Bootstrap 3.0 制作一个带有轮播的网站。

在移动模式 (xs) 中，我的轮播中有 4 个项目，但是当它达到平板电脑大小（sm 或 md）时，客户希望将其删除为仅 2 个项目而不是 4 个。

隐藏指标很简单，可以用hidden-sm去掉2个点，我自己也给item加了hidden-sm，但是控制轮播的JS忽略了这些项目设置为显示：无，并且无论如何都会滚动它们。

有谁知道让 Bootstrap 在某些响应断点处忽略项目的方法？

【问题讨论】：

没有内置的方法可以做到这一点，它需要自定义 jQuery 来跳过这些项目。这不是响应式设计请求，它是自适应的，我这样做的方式是带有移动检测类的服务器端，我为不同的设备加载 html，所以如果不是移动设备，我会加载桌面版本，否则会加载移动设备。紧要关头，由于图像已加载到缓存中，因此您可以显示一个用于桌面的版本和一个用于移动的版本，使用响应式实用程序类
感谢 Christian，我接受了你的建议，对于这个，我在 2 个不同的断点处切换了 2 个不同的轮播，因为我有 99% 的把握客户以后会改变这个！谢谢

标签： javascript twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

我遇到了类似的问题，但需要能够动态更改幻灯片的数量。为了简单起见，我选择将其基于轮播指示器的可见性。我在bootstrap.js 中添加了以下内容，就在Carousel.prototype.slide() 中的变量声明之后：

var $nextIndicator;
if (this.$indicators.length) {
  var iChildren = this.$indicators.children();
  var i=0; 
  while (($nextIndicator = $(iChildren[this.getItemIndex($next)])) && !$nextIndicator.is(':visible') && i<iChildren.length) {
    $next = $next[type]();
    if (!$next.length) {
      if (!this.options.wrap) return
      $next = this.$element.find('.item')[fallback]()
    }    
    i++; 
  }    
}

要删除幻灯片，我将以下内容放入我自己的代码中：

$indicatorsToRemove.hide();
// don't leave user on a page that got removed:
if ($indicatorsToRemove.filter('.active').length) {
  $('#carousel').carousel('next');
}

添加它们：

$indicatorsToAdd.show();

【讨论】：