简介

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