Bootstrap 4旋轉木馬顯示3項，但實際頁面只顯示1圖像

我做了test page（現在直播）與旋轉木馬，應該顯示3張圖片和提前。我試圖按照這個https://www.codeply.com/go/s3I9ivCBYH/bootstrap-4-responsive-carousel-one-at-a-time的代碼在我的頁面上，它一次只顯示一個圖像。我從代碼中複製了代碼並修改了我的圖像的src。我添加了CSS到我的鏈接的custombs4.css頁面，並在頁面底部添加了javascript。Bootstrap 4旋轉木馬顯示3項，但實際頁面只顯示1圖像

你能幫忙解決這個問題嗎？在此先感謝

<--- at the bottom of the page before closing body tag ---> 
 
$('#carouselExample').on('slide.bs.carousel', function (e) { 
 

 
    var $e = $(e.relatedTarget); 
 
    var idx = $e.index(); 
 
    var itemsPerSlide = 3; 
 
    var totalItems = $('.carousel-item').length; 
 
    
 
    if (idx >= totalItems-(itemsPerSlide-1)) { 
 
     var it = itemsPerSlide - (totalItems - idx); 
 
     for (var i=0; i<it; i++) { 
 
      // append slides to end 
 
      if (e.direction=="left") { 
 
       $('.carousel-item').eq(i).appendTo('.carousel-inner'); 
 
      } 
 
      else { 
 
       $('.carousel-item').eq(0).appendTo('.carousel-inner'); 
 
      } 
 
     } 
 
    } 
 
});

<--- css linked on :http://www.pscompetitiveedge.com/css/custombs4.css ---> 
 
media (min-width: 768px) { 
 

 
    /* show 3 items */ 
 
    .carousel-inner .active, 
 
    .carousel-inner .active + .carousel-item, 
 
    .carousel-inner .active + .carousel-item + .carousel-item { 
 
     display: block; 
 
    } 
 
    
 
    .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, 
 
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { 
 
     transition: none; 
 
    } 
 
    
 
    .carousel-inner .carousel-item-next, 
 
    .carousel-inner .carousel-item-prev { 
 
     position: relative; 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    
 
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { 
 
     position: absolute; 
 
     top: 0; 
 
     right: -33.3333%; 
 
     z-index: -1; 
 
     display: block; 
 
     visibility: visible; 
 
    } 
 
    
 
    /* left or forward direction */ 
 
    .active.carousel-item-left + .carousel-item-next.carousel-item-left, 
 
    .carousel-item-next.carousel-item-left + .carousel-item, 
 
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, 
 
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { 
 
     position: relative; 
 
     transform: translate3d(-100%, 0, 0); 
 
     visibility: visible; 
 
    } 
 
    
 
    /* farthest right hidden item must be abso position for animations */ 
 
    .carousel-inner .carousel-item-prev.carousel-item-right { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     z-index: -1; 
 
     display: block; 
 
     visibility: visible; 
 
    } 
 
    
 
    /* right or prev direction */ 
 
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right, 
 
    .carousel-item-prev.carousel-item-right + .carousel-item, 
 
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, 
 
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { 
 
     position: relative; 
 
     transform: translate3d(100%, 0, 0); 
 
     visibility: visible; 
 
     display: block; 
 
     visibility: visible; 
 
    } 
 

 
}

<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000"> 
 
     
 
<div class="carousel-inner row w-100 mx-auto" role="listbox"> 
 
      
 
<div class="carousel-item col-md-4 active"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/1.jpg" alt="teamwork"> 
 
      
 
</div>   
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/2.jpg" alt="fire eating"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/3.jpg" alt="fire walk"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/4.jpg" alt="trust fall"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/5.jpg" alt="trust fall 2"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/6.jpg" alt="crew"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/7.jpg" alt="fire eating 2"> 
 
      
 
</div> 
 
      
 
<div class="carousel-item col-md-4"> 
 
       
 
<img class="img-fluid mx-auto d-block" src="slide/8.jpg" alt="fire eating 3"> 
 
      
 
</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>

來源

2017-10-19 mlegg