Bootstrap 4 - карусель - Как настроить на мобильный только один класс? - PullRequest
Новая
       20

Bootstrap 4 - карусель - Как настроить на мобильный только один класс?

0 голосов
/ 18 апреля 2019

Как настроить иметь только один активный класс на мобильный телефон?В настоящее время у меня есть 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>
...