根据设备的大小激活imageslider

Activate an imageslider based on the size of the device

本文关键字：激活 imageslider      更新时间：2023-09-26

目前我的代码非常重复，非常长，这对我来说不是干净的代码。

在大型设备上:

<div class="hidden-xs">
    <ul class="ul-class-name">
        <li><img src="" /></li>
    </ul>
</div>

当你移动到小屏幕/设备时，我实现了一个jQuery图像滑块，它使用JavaScript初始化:

<div class="visible-xs">
    <ul class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>

$(document).ready(function(){   
    $('.imageslider').bxSlider({
    });

<ul> 's中的内容完全相同，因此对于多个图像，代码非常长。

我怎样才能使imageslider激活仅为移动/xs设备使用一行代码将它们结合起来，就像<ul class="ul-class-name imageslider"> ?我想合并2在一起，以节省大量的代码。

将此添加到你的css代码中:

@media screen and (min-width:761px){
     .imageslider{ visibility:hidden; 
}
@media screen and (max-width:760px){
      .imageslider{ visibility:hidden;
}
@media screen and (max-width:480px){
     .imageslider{ visibility:visible;
}
@media screen and (max-width:360px){
        .imageslider{ visibility:visible;
    }

是的，这是正确的方法，你可以使用n个类通过添加空格;

您可以使用media query来显示滑块，当它显示在移动屏幕尺寸

@media only screen and (min-width:50px) and (max-width:500px)只会在屏幕宽度介于50和500之间时运行px

您可以将它们合并到一个容器中，然后在不同的屏幕尺寸之间切换可见性

<div class="container">
    <ul class="ul-class-name">
        <li><img src="" /></li>
    </ul>
    <ul class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>
CSS: 

.imageslider {
            display: none;
        }
    @media only screen and (min-width:50px) and (max-width:500px) {
        .imageslider {
            display: block;
        }
        .ul-class-name{
            display:none;
                }
    }
相关文章：