Bootstrap之轮播图

<!--轮播图-->框架

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

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

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

                <ol class="carousel-indicators">图片

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

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

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

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

相关文章
相关标签/搜索