具有多个项目的 Bootstrap 4 Carousel 无法正常工作

Question

我有一个带有多个项目的 Bootstrap 4 卡片轮播，当点击下一个或上一个按钮时，移动版按钮也有一些奇怪的过渡效果。 当卡片滑到下一张或上一张卡片似乎彼此重叠或一秒钟时，您可以看到有两张卡片在转换中。

这是我的代码

<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 和 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

您可能链接了 Bootstrap 4 以外的 cdn，或者您也可以尝试 Owl Carousel 进行响应式布局

Bootstrap 4轮播代码

<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>

请检查您的 CDN 或将您的代码与此代码进行比较。 我建议你使用升级版的 Boostrap 5