提问者:小点点

CSS多轮播,但样式仅附加到一个


我希望修改下面的代码,这样它只在某个类附加到轮播时运行。我在同一页上有多个传送带。

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm  if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="2000">
                    <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">
                            <img src="assets/img/car_logos/car_logo_PNG1636.png" class="img-fluid mx-auto d-block contain" alt="img1">
                    </div>

共1个答案

匿名用户

当你可以使用选择器或类这样做的时候,为什么还要这样做?如果您需要更多的定制/控制一个轮播项目,那么请检查owl轮播。https://owlcarousel2.github.io/owlcarousel2/demos/basic.html