022-Carousel

1. Module loading name: carousel.

2. Basic parameter options

2.1. Through the core method: carousel.render(options) to set the basic parameters of the carousel. You can also use the method: carousel.set(options) to set the global basic parameters.

3. Indicator position

3.1. The class="layui-carousel" of the outer element is used to identify it as a carousel container.

3.2. The attribute carousel-item of the inner element is used to identify the item.

4. Switch event

4.1. Triggered every time the carousel is switched, the callback function returns an object parameter with the following members:

var carousel = layui.carousel;

// 监听轮播切换事件
carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
	console.log(obj.index); // 当前条目的索引
	console.log(obj.prevIndex); // 上一个条目的索引
	console.log(obj.item); // 当前条目的元素对象
});

5. Reset the carousel

5.1. In fact, when the carousel.render(options) method is executed, there is an object that returns the current instance. This object contains some properties and methods for operating the current carousel.

var ins = carousel.render(options);
 
// 重置轮播
ins.reload(options);

6. Examples

6.1. Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播组件 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div class="layui-carousel" id="test1" lay-filter="test1">
	  		<div carousel-item>
			    <img src="bg1.png" alt="" />
			    <img src="bg2.png" alt="" />
			    <img src="bg3.png" alt="" />
	  		</div>
		</div>

		<script type="text/javascript">
			layui.use(['carousel'], function(){
  				var carousel = layui.carousel;

		  		// 建造实例
		  		var ins = carousel.render({
				    elem: '#test1' // 指向容器选择器
				    ,width: '850px' // 设定轮播容器宽度
				    ,height: '320px' // 设定轮播容器高度
				    , arrow: 'always' // 切换箭头默认显示状态
				    // ,full: true // 是否全屏轮播
				    ,anim: 'default' // 轮播切换动画方式
				    ,autoplay: true // 是否自动切换
				    ,interval: 2000 // 自动切换的时间间隔
				    ,index: 1 // 初始开始的条目索引
				    ,indicator: 'inside' // 指示器位置
		  		});

		  		// 监听轮播切换事件
				carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
			  		console.log(obj.index); // 当前条目的索引
			  		console.log(obj.prevIndex); // 上一个条目的索引
			  		console.log(obj.item); // 当前条目的元素对象
				});  
			});
		</script>
	</body>
</html>

6.2. Effect picture

Guess you like