Bootstrap 4 Carousel with multiple items is not working correctly

Question

I have a Bootstrap 4 card carousel with multiple items and when clicked on next or prev button there is some strange transition effect also in the mobile version buttons are not working. when the card slides to the next or prev cards seem to be on top of one another or of a sec you can see that there are two cards in transiton.

here is my code

<div id="carouselExampleIndicators" class="carousel slide" data-ride="  false">

          <div class="carousel-inner py-5">
            <div class="carousel-item active  ">



              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>


              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>

              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="carousel-item  ">
              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 newscard">
                <div class="card card-body">
                  <div class="card-img-top card-img-top-250">
                    <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                  </div>
                </div>
              </div>
            </div>



          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span> <i class="bi bi-chevron-left"></i>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span> <i class="bi bi-chevron-right"></i>
          </a>
        </div> 

CSS

  border: 5px solid red !important;
  border-radius: 43px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
 padding: .8rem;
 height: 480px;
}

.card-img-top .img-fluid {

 border-radius: 30px !important;
 margin-bottom: 1.5rem;

}

.newscard .card-body h2{
  color: var(--secondaryColor);
  text-align: left;
  font-size: 1.2rem;
}

.newscard .card-body p{

  text-align: left;
  font-size: 0.7rem;
}


.bi-chevron-left::before, .bi-chevron-right::before {
    content: "\f284";
    color: white;
    opacity: 1;
    background: var(--maincolor);
    padding: 5px 15px;
    border-radius: 50px;
    position: absolute;

}


.bi-chevron-left::before {

        left: -10px;
}

.bi-chevron-right::before{

      right: -10px !important;
}


.carousel-control-prev, .carousel-control-next{
  font-size: 1.5rem;
}


.carousel-control-next-icon, .carousel-control-prev-icon {

    background: transparent no-repeat center center !important;

}

.carousel-control-next, .carousel-control-prev{
      opacity: 1 !important;
}

.carousel-item.active {
   display: flex !important;
}
@media (max-width: 768px) {



.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex  !important;
}
}



/* display 3 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.333%);
    }


.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
  transform: translateX(0);
}

}

Jquery and JS

$('#recipeCarousel').carousel({
 interval :5000
});

$('.carousel .carousel-item').each(function(){
   var next = $(this).next();
   if (!next.length) {
   next = $(this).siblings(':first');
   }
   next.children(':first-child').clone().appendTo($(this));

   for (var i=0;i<2;i++) {
       next=next.next();
       if (!next.length) {
         next = $(this).siblings(':first');
       }

       next.children(':first-child').clone().appendTo($(this));
     }
});

<script>
    (function($) {
      "use strict";
      $('.next').click(function() {
        $('.carousel').carousel('next');
        return false;
      });
      $('.prev').click(function() {
        $('.carousel').carousel('prev');
        return false;
      });
    })
 
  </script> 

Answer 1

it may be possibility that you have linked the cdn of other than Bootstrap 4 or you can also try Owl Carousel for responsive layout

Bootstrap 4 Carousel code

<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul> 
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- items or elements that will be used in carousel -->
    </div>
    <div class="carousel-item">
      <!-- items or elements that will be used in carousel -->
    </div>
    <div class="carousel-item">
      <!-- items or elements that will be used in carousel -->
    </div>
  </div>
 
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

please check your cdn or compare your code with this one. I'm suggesting you to use the Boostrap 5 which is upgrated version