Bootstrap Karussell zeigt seinen gesamten Inhalt auf einmal

Question

Ich versuche ein Karussell zu bauen, ich habe eine Vorlage kopiert, aber es hat nie funktioniert. Es zeigt den gesamten Inhalt. Es gibt vier Bilder und sie werden übereinander angezeigt.

Ich benutze Bootstrap v4. Hier

ist der Code:

<!-- Hot content & Social Network --> 
    <div class="row"> 
    <div id="HotContentCarousel" class="col-sm-6 carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#HotContentCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#HotContentCarousel" data-slide-to="1"></li> 
     <li data-target="#HotContentCarousel" data-slide-to="2"></li> 
     <li data-target="#HotContentCarousel" data-slide-to="3"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="img/pic1.jpg" alt="picture1"> 
     </div> 
     <div class="item"> 
      <img src="img/pic2.jpg" alt="picture2"> 
     </div> 
     <div class="item"> 
      <img src="img/pic3.jpg" alt="picture3"> 
     </div> 
     <div class="item"> 
      <img src="img/pic4.jpg" alt="picture4"> 
     </div> 
     </div> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#HotContentCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#HotContentCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    <!-- END carousel --> 
    <!-- Social Networks --> 
    <div class="col-sm-6"></div> 
</div> 

Hier ist der Dateibaum meiner Website (aktuell ist main.html):

. 
├── css 
│   ├── bootstrap.min.css 
│   └── style.css 
├── img 
│   ├── pic1.jpg 
│   ├── pic2.jpg 
│   ├── pic3.jpg 
│   └── pic4.jpg 
├── js 
│   ├── bootstrap.min.js 
│   ├── jquery.min.js 
│   ├── npm.js 
│   ├── octicons 
│   │   ├── LICENSE.txt 
│   │   ├── octicons.css 
│   │   ├── octicons.eot 
│   │   ├── octicons.less 
│   │   ├── octicons-local.ttf 
│   │   ├── octicons.scss 
│   │   ├── octicons.svg 
│   │   ├── octicons.ttf 
│   │   ├── octicons.woff 
│   │   ├── README.md 
│   │   └── sprockets-octicons.scss 
│   └── umd 
│    ├── alert.js 
│    ├── button.js 
│    ├── carousel.js 
│    ├── collapse.js 
│    ├── dropdown.js 
│    ├── modal.js 
│    ├── popover.js 
│    ├── scrollspy.js 
│    ├── tab.js 
│    ├── tooltip.js 
│    └── util.js 
├── main.html 
└── nohup.out 

Answer 1

Sie haben die richtige Vorlage nicht kopiert. Es sollte <div class="carousel-item"> sein.

prüfen Geige: https://jsfiddle.net/guruwanabe/5c5yta04/