Блог

Мой код на данный момент очень повторяющийся и очень длинный, что для меня не является чистым кодом.

Когда на большом устройстве:

 <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 в пикселях

Вы можете объединить их в один контейнер, а затем переключать видимость между различными размерами экрана

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