multiple item carousel css bootstrap

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:
  <a href="https://www.codeply.com/go/s3I9ivCBYH">https://www.codeply.com/go/s3I9ivCBYH</a>
  
  
</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??

it is possible that the solution also includes some javascript which adds the carousel-item-right css classes to the html element(s) dynamically, mostly like based on a user action. — Reinsbrain, Apr 02 '20 at 05:26

score 0 · Accepted Answer · answered Mar 23 '20 at 07:16

0

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.

answered Mar 23 '20 at 07:16

Muntaha Ibn Ahmed

63
1
8

`carousel-item-prev` class appeared when we're trying to make our previous slide active. these classes used for showing slide moving effect. – Muntaha Ibn Ahmed Mar 23 '20 at 07:39
so all these classes like-left,-right,-prev and -next are used to show only the moving effect of a slide only and nothing else?? – Mar 23 '20 at 07:43
as far I know (by watching on CSS and JS file), **YES** – Muntaha Ibn Ahmed Mar 23 '20 at 07:48

multiple item carousel css bootstrap

1 Answers1