如何在调整大小时关闭旋转木马？

Question

我正在使用<div id=Slider class="carousel slide" data-ride=carousel>显示一些图片和文字。

如果移动设备在网站上，我该如何禁用轮播？我想提高移动设备的谷歌分数。

如果屏幕宽度<= 767，则删除轮播

任何人都可以帮助js hack / css设置吗？

Answer 1

如果我理解正确，您只需要.hidden-xs课程来禁用该轮播。

.hidden-xs -->  Extra small (less than 768px) hidden

了解详情here。

Answer 2

使用bootstrap，您只需添加一个类即可根据大小隐藏元素。

＆LT; 768px

<div id=Slider class="carousel slide hidden-xs" data-ride=carousel>

  

= 768px

 <div id=Slider class="carousel slide hidden-sm" data-ride=carousel>

  

= 992px

<div id=Slider class="carousel slide hidden-md" data-ride=carousel>

  

= 1200像素

<div id=Slider class="carousel slide hidden-lg" data-ride=carousel>

Answer 3

如果我理解正确，您只需要在屏幕上使用CSS3使用媒体查询。

以下是所有不同屏幕尺寸的媒体查询列表： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

所以，你的看起来像是：

@media only screen and (max-device-width: 768px){
    #Slider{
        display: none;
    }
}

这就是说：如果最大宽度显示为768像素，则不要显示id为（无论ID是什么）的容器。