Question

控制台显示每个元素都应该是它应该是什么，但它只是没有显示任何东西，它就像一切都在白色毯子下，我从未见过这种问题，也不知道它可能是什么。奇怪的是甚至连图像都没有出现

<!--read-anywhere starts -->
<section class="read-anywhere page" id="read-anywhere">
  <div class="container">
    <div class="row">
      <div class="main-heading clearfix">
        <div class="col-md-12 text-center">
          <h1 class="text-center">Carousel</h1>
          <h2 class="text-center">Carousel sub title.</h2>
        </div>
      </div>

      <div class="col-md-12">
        <div id="read-anywhere-slider" class="carousel fade" data-ride="carousel" data-interval="3000">
          <div class="row">

            <!-- Indicators -->
            <div class="col-md-6">
              <ol class="carousel-indicators">
                <li data-target="#read-anywhere-slider" data-slide-to="0" class="mobile active">
                  <img src="http://lorempixel.com/300/500/" width="30px"> mobile
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="1" class="kindle">
                  <img src="http://lorempixel.com/300/500/" width="35px"> kindle
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="2" class="tablet">
                  <img src="http://lorempixel.com/300/500/" width="35px"> tablet
                </li>
                <li data-target="#read-anywhere-slider" data-slide-to="3" class="laptop">
                  <img src="http://lorempixel.com/300/500/" width="45px"> laptop
                </li>
              </ol>
            </div>

            <div class="col-md-6">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">

                <div class="item active">
                  <img src="http://lorempixel.com/300/500/" class="read-ipad">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-laptop">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-iphone">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/300/500/" class="read-kindle">
                </div>

              </div>


            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>
<!--read-anywhere ends -->

Answer 1

您的HTML代码包含几个错误。

您当前的代码如下所示（采用Emmet风格）：

.col-md-12 > .carousel > .row > .col-md-6 + .col-md-6 > .carousel-inner

顺便说一句，在这种情况下，您根本不需要.col-md-12。所以最终的HTML结构将是这样的：

.container > .row > .col-md-6 + .col-md-6 > .carousel > .carousel inner

第二个错误是.fade上的.carousel课程。默认情况下，bootstrap不能为旋转木马做淡化动画。 fade类仅适用于模态组件。默认轮播行为正在滑动。因此，您需要将.slide类添加到.carousel元素。

如果你想获得淡入淡出效果，你可以尝试某人的片段，如this codepen。

Answer 2

免责声明：我对carousel.js不太熟悉，但我改变了这一点：

class="carousel fade"

成：

class="carousel slide"

这至少会使滑动图片出现。

Answer 3

请检查此[jsfiddle][1]

可能对您有所帮助

bootstrap轮播显示总空白

3 个答案: