Bootstrap 4 carrousel montrer 3 articles, mais la page réelle ne montre que 1 image

Question

J'ai fait un test page (up live now) avec un carrousel qui devrait montrer 3 images et avancer. J'ai essayé de suivre le code de cette https://www.codeply.com/go/s3I9ivCBYH/bootstrap-4-responsive-carousel-one-at-a-time Sur ma page il montre seulement une image à la fois. J'ai copié le code de codeply et modifié le src pour mes images. J'ai ajouté le css à ma page custombs4.css liée et j'ai ajouté le javascript au bas de la page.

Pouvez-vous nous aider à comprendre? merci à l'avance

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

Answer 1

Le problème est sur la ligne 320 de votre custombs4.css, il vous manque une @ avant que les médias. Ce qui en fait un tag media et vous ne remarquez aucun problème. Dès qu'un Réparez tout fonctionne bien

Avant

Après