Question

一个简单的问题

我正在阅读有关多个项目轮播的教程，并在我无法理解的css代码中找到了它

 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="900000">
        <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-2 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 8">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=9" alt="slide 9">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=10" alt="slide 10">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=11" alt="slide 11">
            </div>
            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=12" alt="slide 12">
            </div>
          <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=13" alt="slide 13">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<br>
<br>
<p class="d-block p-5">
  <br>
  split up and commented css for understanding. <br> 
  fixed animation for previous slide. <br>
  added breakpoints and slide item counts
  <br><br>
  based on:
  <a href="https://www.codeply.com/go/s3I9ivCBYH">https://www.codeply.com/go/s3I9ivCBYH</a>
  
  
</p>

所以我的问题是，在html代码中甚至没有提到上述代码中的carousel-item-right和carousel-item-left类的用途是什么？此外，这些类试图指示什么以及它们的含义？

Answer 1

幻灯片正在更改时，显示

carousel-item-right和carousel-item-left类。那些类的稳定期小于1s。打开浏览器开发工具以查看此信息。这是给你的截图。

多个项目轮播CSS引导程序

1 个答案: