multiple item carousel css bootstrap - html

Question

Just a simple question
I was going through a tutorial for multiple item carousel and found this in I a css code which I couldn't understand
.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:
https://www.codeply.com/go/s3I9ivCBYH
</p>
so my question is what is use of classes carousel-item-right and carousel-item-left in above code when it is not even mentioned in the html code?? moreover what these classes are trying to indicate and what they mean??

Answer 1

carousel-item-right and carousel-item-left classes show while a slide is changing. those classes Period of stability is less than 1s. open your browser dev tool to see this. here is a screenshot for you.