bootstrap carousel bütün içeriğini aynı anda gösteriyor

Question

Bir atlıkarınca oluşturmaya çalışıyorum, bir şablonu kopyaladım ama hiç işe yaramadı. Tüm içeriği gösterir. Dört resim var ve birbirlerinin üstünde gösteriliyor.

Bootstrap v4 kullanıyorum. (Geçerli main.html olan)

İşte

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

Web sitemin dosya ağacı: Burada

kodudur

. 
├── 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

Doğru şablonu kopyalanamaz vermedi. <div class="carousel-item"> olabilir.

Kontrol keman: hatalar için https://jsfiddle.net/guruwanabe/5c5yta04/