轮播图像不在引导css中旋转 [英] Carousel images are not rotating in bootstrap css

问题描述

我尝试在引导CSS中实现轮播，但轮播不旋转，我在轮播中使用HTML图像

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

$ b b

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

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

谢谢，
Pranay

Thanks, Pranay

推荐答案

链接到Bootply

问题是你已经定位 myCarousel ，但是没有在任何地方设置。您需要给 div 的 id 的 myCarousel

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>

这篇关于轮播图像不在引导css中旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！