Bootstrap Carousel (Bootstrap广告轮播器)使用上的小技巧

这篇文章要跟你分享几个使用Bootstrap的小技巧

包括：

1. 移除换页的箭头及按钮
2. 改变幻灯片停留的时间
3. 关闭自动轮播
4. 关闭轮播暂停
5. 关闭自动开始播放

之前我们在当只有一张图片的时候、隐藏Bootstrap Carousel的箭头和按钮这篇文章中分享了如何在判断只有一张图片的时候隐藏Bootstrap Carousel的箭头和按钮的技计。但是、如果你只是单纯的希望移除换页的箭头及换钮的话，只要移除相关的html标签就可以了。

移除换页的箭头及按钮

<div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel" > <!-- Indicators --> <ol class = "carousel-indicators" >   
  
   
    ….
  </ol>

  <!-- Wrapper for slides --> <div class = "carousel-inner" role = "listbox" >
    
    ...
  </div>

  <!-​​- Controls -->
  <a class="left carousel-control" ...
  </a>
  <a class="right carousel-control" ...
  </a> </div>

上面是一个基本的Bootstrap Carousel，我们把箭页和按钮的html标签移掉就会变成这样：

<divid = "carousel-example-generic" class = "carousel slide" data-ride = "carousel" > <!-- Wrapper for slides --> <divclass = "carousel-inner" role = "listbox" >
  
  
    ...
  </div> </div>

上面这段html只会保留幻灯片的部份、不会有换页的箭头及按钮。

改变幻灯片停留的时间

Bootstrap Carousel 每张幻灯片预设的停留时间为5秒(5000毫秒)，如果想要改变停留的时间，可以加上interval这个选项。底下的范例是将每张幻灯片停留的时间改为2秒(2000毫秒)。

$ ( '.carousel' ). carousel ({ 
  interval : 2000 }) 

取消自动轮播

若是想要取消自动轮播可以使将interval设为false。

$ ( '.carousel' ). carousel ({ 
  interval : false }) 

轮播暂停

Bootstrap Carousel的预设状态是：当滑鼠滑入时，轮播暂停。如果想要让滑鼠滑入时继续轮播的话，就要使用以下的设定。

$ ( '.carousel' ). carousel ({ 
  pause : false }) 

自动开始播放

如果在html加上data-ride=”carousel”的话，那么Bootstrap Carousel广告轮播器就会在页面载入之后、自动开始播放。如果移除data-ride=”carousel”的话，那么只有当使用者点系箭头或按钮之后，轮播器才会开始播放。

//自动开始播放的轮播器< div id = "carousel-example-generic" class = "carousel slide" data - ride = "carousel" > //轮播的内容... </ div >
 
  


//手动开始播放的轮播器< div id = "carousel-example-generic" class = "carousel slide" > //轮播的内容... </ div >