Question

我正在尝试在bootstrap CSS中实现轮播但旋转木马不旋转，我在旋转木马中使用HTML图像，

这是代码：

            <!--Indicators-->
            <ol class="carousel-indicators">
                <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2" ></li>
            </ol><!--End ordered list-->

            <!--Wrapper for slides-->
            <div class="carousel-inner">
                <div class="item active" id="slide1">
                    <img src="http://placehold.it/1200x500">
                    <div class="carousel-caption">
                        <h4>Bootstrap 3</h4>
                        <p>Learn how to build your first responsive website with the brand new Twiter Bootstrap3!</p>
                    </div><!--End carousel caption-->
                </div><!--End item-->

                <div class="item" id="slide2">
                    <img src="http://placehold.it/1200x500">
                    <div class="carousel-caption">
                        <h4>Learn to code a website in 4 hours!</h4>
                        <p>PSD to HTML & CSS3 is a popular Udemy course that has helped thousands of aspiring web designers launch their web design career.</p>
                    </div><!--End carousel caption-->
                </div><!--End item-->

                <div class="item" id="slide3">
                    <img src="http://placehold.it/1200x500">
                    <div class="carousel-caption">
                        <h4>Web Hosting 101</h4>
                        <p>Learn how to buy a perfect domain name and hosting package, and get your website live on the web with ease.</p>
                    </div><!--End carousel caption-->
                </div><!--End item-->
            </div><!--End carousel inner-->

            <!--carousal controls-->
        <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> 
        <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>


        </div><!--End myCrousel-->'

我在哪里做错了？请建议......

谢谢， Pranay

Answer 1

Link to Bootply

问题是您已定位myCarousel但未在任何地方设置。您需要div id myCarousel <div id="myCarousel" class="carousel slide">  </div>并将其包裹在您的代码中。

将此代码包装在您的周围：

{{1}}

Answer 2

您需要添加以上指标

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

您可以在http://getbootstrap.com/javascript/#carousel

获取详细信息

由于

Answer 3

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Carousel indicators -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>   

    <!-- Carousel items -->

    <div class="carousel-inner">

        <div class="active item">

            <h2>Slide 1</h2>

            <div class="carousel-caption">

              <h3>First slide label</h3>

              <p>Lorem ipsum dolor sit amet consectetur…</p>

            </div>

        </div>

        <div class="item">

            <h2>Slide 2</h2>

            <div class="carousel-caption">

              <h3>Second slide label</h3>

              <p>Aliquam sit amet gravida nibh, facilisis gravida…</p>

            </div>

        </div>

        <div class="item">

            <h2>Slide 3</h2>

            <div class="carousel-caption">

              <h3>Third slide label</h3>

              <p>Praesent commodo cursus magna vel…</p>

            </div>

        </div>

    </div>

    <!-- Carousel nav -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

Answer 4

值得注意的是，我无法正确链接到bootstrap.js文件。如果您只是使用GetBootstrap.com的4.0测试版文件中的示例，则可能会在文件末尾使用以下内容。

<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>

如果您预计流量较低且不想直接在项目中包含这些文件，则可以使用CDN。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

轮播图像在bootstrap css中不旋转

4 个答案: