简介

bxslider是一款功能强大的JQuery响应式焦点轮播图滑动特效插件。

插件特定：

充分响应各种设备，适应各种屏幕；

支持多种滑动模式，水平、垂直以及淡入淡出效果；

支持图片、视频以及任意html内容；

支持触摸滑动；

支持Firefox，Chrome，Safari，iOS，Android，IE7+。

使用

1.  引入文件

<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />

<!-- jQuery library -->
<script src="jquery-3.1.1.min.js"></script>

<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>

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/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
</ul>

3.  调用

<script>
  $(document).ready(function() {
    $('.bxslider').bxSlider({
      mode: 'horizontal',
      moveSlides: 1,
      slideMargin: 40,
      infiniteLoop: true,
      slideWidth: 660,
      minSlides: 3,
      maxSlides: 3,
      speed: 800,
    });
  });
</script>

相关链接

官方地址 ：https://bxslider.com/

GitHub 地址 ：https://github.com/ChrisGhenea/bxslider-4