响应式 jQuery Slider 插件: bxSlider

bxSlider 是一款免费的 jQuery Slider 的插件，它可以实现 内容和图片幻灯片滚动效果，支持响应式，桌面和手机等各种设备都能完美适应。

bxSlider 详细功能

• 完全响应式：支持所有设备。
• 支持水平，垂直和淡入淡出等模式。
• 支持图片，视频和 HTML 内容等幻灯片。
• 内置支持触摸和滑动等高级操作。
• 使用 CSS transitions 来实现幻灯片动画（原生硬件加速）。
• 完整的回调 API 和接口。
• 插件体积非常小，但是包含完整的主题，非常容易集成。
• 支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
• 非常详细的功能配置选项。

使用 bxSlider

在介绍 bxSlider 使用之前，先看下 bxSlider 演示（RSS 用户需要返回原网站查看）：

1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库：

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2. 创建一个对应的 HTML 代码：

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

3. 调用 bxSlider:

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

当然 bxSlider 还有许多设置参数，你可以根据你自己的项目需求进行配置，详细请查看 bxSlider 的 Options 页面。

下载：bxSlider。
演示：jQuery slider 插件: bxSlider

作者：Denis

原文链接：响应式 jQuery Slider 插件: bxSlider

© 我爱水煮鱼，转载请留下原文链接。