css – Make Bootstrap Carousel move seamlessly


I have been using bootstrap v5 in a project and I want that on clicking the next button, the next slide should start to enter side by side rather than waiting for the first one to leave the viewport(Kind of similar to that carousel implemented by Netflix). Is there any way out to tweak with the default bootstrap code and get the desired result?

The current Carousel HTML:

<div id="carousel" className="carousel slide" data-bs-interval="false">
  <div class="carousel-inner">
    <div className="carousel-item active">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
    </div>
    <div className="carousel-item">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
</div>

Tech Used: Bootstrap v5, Reactjs



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here