多项目轮播 css bootstrap

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 bootstrap

multiple item carousel css bootstrap

html

css

bootstrap-carousel