ブートストラップカルーセル全体のコンテンツを一度に表示

Question

カルーセルを構築しようとしていますが、テンプレートをコピー貼り付けましたが、うまく機能しませんでした。全体の内容を表示します。 4枚の写真があり、それらはお互いの上に表示されます。

私はブートストラップv4を使用しています。ここで

はコードです：ここでは

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

は（現在は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

あなたが右のテンプレートをコピーしませんでした。 <div class="carousel-item">と表示されます。

チェックしてください：https://jsfiddle.net/guruwanabe/5c5yta04/