Javascript 引导转盘如何在xs大小的滑块上隐藏一个项目？

如何仅在xs大小的引导转盘中隐藏一个或两个项目

当我将类“hidden xs”添加到carousel和item div中的此项时，如下所示：

<div class="item hidden-xs">
      <img src="imgTop2.jpg" alt="...">
</div>

<div id="carousel-top" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="hidden carousel-indicators" style="display:none">
      <li data-target="#carousel-top" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-top" data-slide-to="1"></li>
      <li class="" data-target="#carousel-top" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
      <img src="imgTop.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop2.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop3.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop4.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop5.jpg" alt="...">
    </div>


    </div>

    <!-- Controls -->
    <a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

所有的物品和旋转木马都不见了

当我为这个项目向img元素添加“hiddenxs”类时，同样的问题也存在

我怎样才能解决这个问题？我只想在xs上隐藏一两张幻灯片。其他人必须是看得见的

我的代码如下所示：

<div class="item hidden-xs">
      <img src="imgTop2.jpg" alt="...">
</div>

<div id="carousel-top" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="hidden carousel-indicators" style="display:none">
      <li data-target="#carousel-top" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-top" data-slide-to="1"></li>
      <li class="" data-target="#carousel-top" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
      <img src="imgTop.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop2.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop3.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop4.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop5.jpg" alt="...">
    </div>


    </div>

    <!-- Controls -->
    <a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

我想不出一种仅使用引导助手类的方法，因为carousel脚本依赖于

.item

类。但您可以使用以下jQuery：

if ($(window).width() < 960) {
     $('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}

if（$（窗口）.width（）<960）{
$（'#carousel top.hide on mobile'）.removeClass（'item'）.addClass（'hide'）；
}

您只需将类

.hide on mobile

添加到要在移动设备上隐藏的项目中

---

扩展Sebsemillia的方法，您可以在窗口调整大小事件中主动实现此条件逻辑。唯一需要注意的是，如果元素的类为“active”，则还必须删除该类并将其添加到另一张幻灯片中，而不使用

.hide on mobile

类。请参见此处，使用class

。无手机

--

$（函数（）{
变量$window=$（window）；
函数设备宽度（）{
返回$window.width（）；
} 
功能切换MobileSlideVisibility（显示隐藏）{
$no_mobile_slides=$（'.carousel-inner'）。查找（'no-mobile'）；
if（show_hide=='hide'）{
var重置\激活\滑动=错误；
$no_mobile_幻灯片。每个功能（即，e）{
if（$（e）.hasClass（'active'））{
重置\活动\滑动=真；
$（e）.removeClass（“活动”）；
}
});
$no_mobile_slides.removeClass（'item'）.addClass（'hide'）；
如果（重置\活动\滑动）{
$（'.carousel-inner'）.find（'.item'）.first（）.addClass（'active'）；
}
}else if（show_hide==='show'）{
$no_mobile_slides.addClass（'item'）.removeClass（'hide'）；
}
}
var为移动设备=false；
var detectMobile=函数detectMobile（）{
如果（deviceWidth（）>978）{
如果（是移动设备）{toggleMobileSlideVisibility（'show'）；}
is_mobile_device=false；
}否则{
如果（！is_mobile_device）{toggleMobileSlideVisibility（'hide'）；}
is_mobile_device=true；
}
}
$（窗口）.on（'resize'，function（））{
detectMobile（）；
});
detectMobile（）；
});




只是一张幻灯片
应该隐藏在手机上的幻灯片
只是另一张幻灯片
或者您可以使用CSS媒体查询隐藏您在手机上选择的项目：

@media screen and (max-device-width: 800px) {
  .slide-hide-on-mobile { display: none; }
}

您只需将class=“slide hide on mobile”添加到要隐藏的项目：

<div class="item active slide-hide-on-mobile">
  <img src="imgTop.jpg" alt="...">
</div>