BootStrap轮播入门学习

BootStrap轮播入门学习_第1张图片
image.png

一般模式
1首先要设置一个轮播图片的容器,记得设上id。


2.设计轮播图片计数器。
也就是轮播下面的这个小点

BootStrap轮播入门学习_第2张图片
image.png

三个点分别对应123.用data-slide-to参数进行控制。
data-targe参数照抄,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。

   

3.设计图片轮播区,这个区域用来放置图片。
把图片放置在class="carousel-inner"的div区域中。
然后每个图片放在class="item"的div区域。


最终

 

设置轮播标题

这个如果需要,也可以设置,如图


BootStrap轮播入门学习_第3张图片
image.png
        
![](2.jpg)

设置轮播导航

什么是导航?

image.png

如下

    
    

设置轮播自动播放

此时需要jquery出售了。interval: 设置自动播放间隔时间


综上


 


参考

全面解析Bootstrap图片轮播效果javascript技巧脚本之家

你可能感兴趣的:(BootStrap轮播入门学习)