【Jquery插件】Owl Carousel轮播插件介绍与使用

Owl Carousel：Basic Demo | Owl Carousel | 2.3.4 (owlcarousel2.github.io)

「Owl Carousel」插件常用的参数配置如下：

参数名称	参数类型	默认值	说明
items	number	3	设置同时显示的轮播项数
loop	boolean	false	是否开启循环播放
autoplay	boolean	false	是否自动播放
autoplayTimeout	number	5000	自动播放等待时间，单位为毫秒
autoplayHoverPause	boolean	false	当鼠标移到轮播图上时，是否暂停自动播放
smartSpeed	number	250	移动速度
nav	boolean	false	是否显示左右箭头
dots	boolean	true	是否显示小圆点导航
margin	number	0	轮播项之间的间距，单位为像素（pixel）
responsive	object	——	响应式布局设置对象
mouseDrag	boolean	true	是否允许使用鼠标拖拽切换轮播项
touchDrag	boolean	true	是否允许使用触摸屏手势切换轮播项
pullDrag	boolean	true	是否允许拖拽轮播项时拉动轮播图
freeDrag	boolean	false	是否允许拖拽轮播项时自由切换方向
autoplaySpeed	number	2500	自动播放的速度，单位为毫秒

示例代码如下：

  
1
  
2
  
3
  
4
  
5
  
6

Owl Carousel将dotc小点导航切换成对应图片导航

 大致效果：

 代码实现：

// HTML & CSS


		

		

		

// JS
		$(document).ready(function () {
			var owl = $(".owl-carousel");
			owl.owlCarousel({
				loop: true,
				margin: 10,
				nav: true, // 显示左右导航箭头
				dots: true, // 显示小圆点导航
				navText: [
					'', // 设置前导航按钮图片
					'' // 设置后导航按钮图片
				],
				dotsEach: true,
				dotsContainer: "#customDots", // 使用外部容器来存放导航点
				responsive: {
					0: {
						items: 1
					},
					600: {
						items: 1
					},
					1000: {
						items: 1
					}
				}
			});

			// 构造自定义导航图片
			var dotImages = [
				"./images/banner_1.jpg",
				"./images/banner_2.jpg",
				"./images/banner_3.jpg"
			];
			// 替换小圆点导航为自定义图片
			for (var i = 0; i < dotImages.length; i++) {
				$("#customDots button:nth-child(" + (i + 1) + ")").css({
					"id": "dot" + i,
					"height": "100px",
					"width": "100px",
					"background-image": "url(" + dotImages[i] + ")",
					"background-size": "cover"
				});
			}
		});