引导轮播一次显示其全部内容

Question

我正在尝试构建轮播，我已经粘贴了模板，但从未成功。 它显示了全部内容。 有四张图片，它们彼此重叠显示。

我正在使用bootstrap 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/