Bootstrap之轮播图

2019独角兽企业重金招聘Python工程师标准>>>

<!--轮播图-->

            Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

            <div class="carousel slide" id="myCarousel">//创建一个轮播图容器

                <!--1.小圆点page-->

                <ol class="carousel-indicators">

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

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

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

                </ol>

                <!--2.图片-->

                <div class="carousel-inner" id="img1">

                    <div class="item active">

                        <img src="http://imga1.pic21.com/bizhi/140212/07423/s10.jpg" />

                    </div>

                    <div class="item">

                        <img src="http://imga1.pic21.com/bizhi/140212/07423/s07.jpg" />

                    </div>

                    <div class="item">

                        <img src="http://imga1.pic21.com/bizhi/140118/06772/s05.jpg" />

                    </div>

                </div>

                <!--3.左右导航-->

                <!--hammer.js-->

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

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

            </div>

转载于:https://my.oschina.net/6104zhang/blog/785964