响应式内容滑动插件bxSlider

响应式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="https://zhishitu.com"
<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