第十篇.bootstrap轮播

使用bootstrap的轮播插件可以向站点添加滑块，内容可以是图像，内嵌框架，视频或其它任何内容，使用轮播插件需要引入bootstrap.min.js.

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

            <!—轮播导航 -->

 

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

 

            <!—轮播项目 -->

            <div class="carousel-inner" role="listbox">

                <div class="item active">

 

 

                    <img src="~/images/Chrysanthemum.jpg" />

                    <div class="carousel-caption">

                        ffffffff

                    </div>

                </div>

                <div class="item">

 

                    <img src="~/images/Desert.jpg" />

                    <div class="carousel-caption">

                        xxxxxxxxxxxxxxxx

                    </div>

                </div>

                <div class="item">

 

 

                    <img src="~/images/Lighthouse.jpg" />

                    <div class="carousel-caption">

                       mmmmmmmmmmmm

                    </div>

                </div>

            </div>

 

            <!—轮播导航 -->

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

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

                <span class="sr-only">Previous</span>

            </a>

            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

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

                <span class="sr-only">Next</span>

            </a>

        </div>

 

效果如下:

 

转载于:https://www.cnblogs.com/xiahao/p/5603245.html