響應式WEB設計可以讓WEB頁面自適應各種尺寸的屏幕，儼然已經成為了當今WEB設計趨勢。本文將介紹一款基於jQuery的響應式內容滑動插件以及如何使用這款插件到你的WEB應用中，滿足各類WEB設計需求。

bxSlider特性

1.充分響應各種設備，適應各種屏幕；

2.支持多種滑動模式，水平、垂直以及淡入淡出效果；

3.支持圖片、視頻以及任意html內容；

4.支持觸摸滑動；

5.支持Firefox，Chrome，Safari，iOS，Android，IE7+

如何使用bxSlider

1、首先是加載jQuery庫，以及bxSlider插件文件和相關CSS文件，您可以從官方網站下載最新版本的bxSlider。

<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script>

2、準備滑動內容，我們創建一個ul.bxslider，然後在其子元素li中加入滑動內容，滑動內容可以是圖片、視頻以及任意html內容：

<ul 
 
class="bxslider"> 
      <li><img src="images/s1.jpg" /></li> 
      <li><img src="images/s2.jpg" /></li> 
      <li><img src="images/s3.jpg" /></li> 
</ul>

3、調用bxSlider插件，當頁面內容加載完時調用bxSlider。

$(function(){ 
    $(‘.bxslider‘).bxSlider(); 
});
 

這樣，一個超酷的內容滑動效果就實現了，查看演示demo，將瀏覽器窗口放大和縮小可以看到滑動內容會隨著瀏覽器窗口自動調整大小。bxSlider提供了豐富的配置選項，可以設置不同參數滿足各種客戶需求，來看它的選項配置。

bxSlider選項設置

bxSlider提供了豐富的選項可配置，以下我們列出最主要也是最常用的選項設置。

更多bxSlider的選項設置，請參照bxSlider官網：http://bxslider.com/options

響應式內容滑動插件bxSlider