Блог

Как настроить только один активный класс на мобильное устройство? В настоящее время у меня есть 4 активных класса в коде. Кто-нибудь может мне помочь? Я искал разные решения, но даже здесь я ничего не нашел.

Это мой JS-код:

 jQuery(document).ready(function($){
$('#carousel-example').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
var totalItems = $('#carousel-example .carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i  ) {
        if (e.direction=="left") {
            $('#carousel-example .carousel-item').eq(i).appendTo('#carousel-example .carousel-inner');
        }
        else {
            $('#carousel-example .carousel-item').eq(0).appendTo('#carousel-example .carousel-inner');
        }
    }
}
});
});
 

Это мой код CSS:

 @media (min-width: 768px) and (max-width: 991px) {
#aboutus  .carousel-inner .active.col-md-4.carousel-item   .carousel-item   .carousel-item   .carousel-item {position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible;}
}
@media (min-width: 576px) and (max-width: 768px) {
#aboutus  .carousel-inner .active.col-sm-6.carousel-item   .carousel-item   .carousel-item {position: absolute; top: 0; right: -50%; z-index: -1; display: block; visibility: visible;}
}
@media (min-width: 576px) {
#aboutus .carousel-item {margin-right: 0;}
#aboutus .carousel-inner .active   .carousel-item {display: block;}
#aboutus .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
#aboutus .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)   .carousel-item {transition: none;}
#aboutus .carousel-inner .carousel-item-next {position: relative; transform: translate3d(0, 0, 0);}
#aboutus .active.carousel-item-left   .carousel-item-next.carousel-item-left,
#aboutus .carousel-item-next.carousel-item-left   .carousel-item,
#aboutus .carousel-item-next.carousel-item-left   .carousel-item   .carousel-item {position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;}
#aboutus .carousel-inner .carousel-item-prev.carousel-item-right {position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible;}
#aboutus .active.carousel-item-right   .carousel-item-prev.carousel-item-right,
#aboutus .carousel-item-prev.carousel-item-right   .carousel-item,
#aboutus .carousel-item-prev.carousel-item-right   .carousel-item   .carousel-item {position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible;}
}
@media (min-width: 768px) {
#aboutus .carousel-inner .active   .carousel-item   .carousel-item {display: block;}
#aboutus .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)   .carousel-item   .carousel-item {transition: none;}
#aboutus .carousel-inner .carousel-item-next {position: relative; transform: translate3d(0, 0, 0);}
#aboutus .carousel-item-next.carousel-item-left   .carousel-item   .carousel-item   .carousel-item {position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;}
#aboutus .carousel-item-prev.carousel-item-right   .carousel-item   .carousel-item   .carousel-item {position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible;}
}
@media (min-width: 991px) {
#aboutus .carousel-inner .active   .carousel-item   .carousel-item   .carousel-item {display: block;}
#aboutus .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)   .carousel-item   .carousel-item   .carousel-item {transition: none;}
#aboutus .carousel-inner .active.col-lg-3.carousel-item   .carousel-item   .carousel-item   .carousel-item   .carousel-item {position: absolute; top: 0; right: -25%; z-index: -1; display: block; visibility: visible;}
#aboutus .carousel-item-next.carousel-item-left   .carousel-item   .carousel-item   .carousel-item   .carousel-item {position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;}
#aboutus .carousel-item-prev.carousel-item-right   .carousel-item   .carousel-item   .carousel-item   .carousel-item {position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible;}
}
 

Теперь в коде у меня такой результат

Это мой HTML-код:

 <div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">...</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">...</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">...</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">...</div>
</div>