响应式 jQuery Slider 插件: bxSlider

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

bxSlider 详细功能

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

使用 bxSlider

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

WordPress：企业建站利器 WordPress 是一款风靡全球的开源 CMS 系统。在过去，它更多的应用于开设个人或多用户博客系统；但现在，它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一，自从2006年初次接触 WordPress 系统开始，我就为其强大的功能，灵活的可扩展性，以及方便的可定制性所深深吸引。

美国虚拟主机推荐：Bluehost Bluehost 建立于 1996 年，已经具有了十几年的虚拟主机服务经验，现已突破 100 万的网站托管数量，并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑，在美国是深受好评的虚拟主机，在美国主机界也是屡获大奖。

bbPress 介绍，安装和中文包 bbPress 是一款开源论坛程序，它是一个非常容易使用的轻量级论坛程序，由于 bbPress 保持了体积小，重量轻，没有提供过多复杂的功能，所以速度非常快。对于有更多需求的用户来说，bbPress 也和 WordPress 一样提供了一个非常强大插件系统，让你添加各种功能扩充论坛。

• 主机推荐：(mt) Media Temple Media Temple 简称 (mt) ，是一家比较独特的美国主机商，和其他美国商一样大肆的做广告不一样，(mt) 更关注社区，它的营销计划可以简单归纳为：Host Great Sites，所以选择了 (mt)，就选择和许多伟大的站点做邻居。我爱水煮鱼目前正在使用 Media Temple 主机。

WordPress 相关日志插件：WordPress Related Posts 产生相关日志最好的方法就是通过 Tag，根据日志含有相同的 Tag 数越多，就认为日志相关性越强，所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件，它会根据日志的 tag 的相关性产生一个相关日志列表。

WordPress 主题教程：从零开始制作 WordPress 主题 创建 WordPress 主题其实不难，只要你从现在开始认真学习这个教程，从零一步一步开始，你就会成为一个 WordPress 主题制作高手，至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程，它会一步一步教你如何制作 WordPress 主题。

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 decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/22fc24ccad6fa7e5ef8dadd78dc2e954.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" />
    /li>
    
li>
    img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/d36bae5d9cd370376c3b1efa95539061.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" />
    /li>
    
li>
    img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/b9909b949543076606e70bac575817d8.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" />
    /li>
    
li>
    img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/86310580700cceb24c6c6804ca368278.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" />
    /li>
    
/ul>

3. 调用 bxSlider:

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

}
    );
    

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！