Bootstrap图片轮播插件carousel

start:需要引入bootstrap轮播插件 carousel.js 或者直接引入bootstrap.min.js

基本原理:

第一步:设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式,给这个容器一个ID值,方便后面采用data属性触发。


第二步:设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器,采用carousel-indicators样式,一般用ol有序列表(有几张图片放置几个li),以白点的形式展示(具体样式在bootstrap.css文件第5835行起)


第三步:设置轮播图片播放区
最关键的区域,主要用来放置需要轮播的图片,用carousel-inner样式控制,用item容器放置每张轮播的图片。


第四步:设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器,在此,用carousel-control样式配合left、right来实现。


demo:

  
  
  
      
      
      
      
      
      
      

      
      
      

      
      
      
      
  
  

  

  
  

呈现出的样式:

你可能感兴趣的:(Bootstrap图片轮播插件carousel)