Carousel images are not rotating in bootstrap css

问题

I am trying to implement carousel in bootstrap CSS but the carousel is not rotating,I am using HTML images in the carousel,

Here is the code:

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

Where am i doing wrong??Please suggest...

Thanks, Pranay

回答1:

Link to Bootply

The problem was that you had targeted myCarousel but hadn't set that anywhere. You needed to give a div the id of myCarousel and wrap it around your code.

Wrap this code around yours:

<div id="myCarousel" class="carousel slide">
  <!-- Your code -->
</div>

回答2:

You need to add above indicators

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

You can get for details at http://getbootstrap.com/javascript/#carousel

Thanks

回答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>

回答4:

It is worth noting for me, I was failing to link to the bootstrap.js files properly. If you are simply using the examples in the 4.0 beta files from GetBootstrap.com you can likely use the following at the end of your file.

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

If you are projecting low traffic and don't want to include the files directly in your project you can use the 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>

来源：https://stackoverflow.com/questions/22933992/carousel-images-are-not-rotating-in-bootstrap-css