2 карусели в одной странице

@media (min-width: 992px ) {
 .carousel-inner .active.left { left: -16.7%; }
 .carousel-inner .next { left: 16.7%; }
 .carousel-inner .prev { left: -16.7%; } 
}

У меня есть две загрузочные карусели внутри страницы. Я хочу добавить вышеупомянутый медиа-запрос для отдельной карусели. Но приведенный выше код влияет на оба карусели.

Это объявления двух ползунков.

<div id="multiItemCarousel" data-ride="carousel" data-type="multi" data-interval="3000"><div id="carouselBanner" data-ride="carousel" data-interval="3000"> <p> Как применить медиа-запрос только для одного слайдера?</p> </div></div>
1 ответ

akiaWT работает, используя цепочку иерархии, подобную этой.

@media (min-width: 992px ) {
 #carousel-example2 > .carousel-inner > .active.left { left: -16.7%; }
 #carousel-example2 > .carousel-inner .next { left: 16.7%; }
 #carousel-example2 > .carousel-inner .prev { left: -16.7%; } 
}

Я не уверен, что вы собираетесь с этим, но вы можете применить изменения к одной карусели.

См. JsFiddle

Также обратите внимание, что из-за вашей настройки минимальной ширины это произойдет только на экранах шириной> 992 пикселей.

licensed under cc by-sa 3.0 with attribution.