022-carrusel

1. Nombre de carga del módulo: carrusel.

2. Opciones de parámetros básicos

2.1 A través del método core: carousel.render (opciones) para configurar los parámetros básicos del carrusel. También puede utilizar el método: carousel.set (opciones) para establecer los parámetros básicos globales.

3. Posición del indicador

3.1 La clase = "layui-carrusel" del elemento exterior se utiliza para identificarlo como un contenedor carrusel.

3.2 El atributo carrusel-artículo del elemento interior se utiliza para identificar el artículo.

4. Cambiar evento

4.1. Activada cada vez que se cambia el carrusel, la función de devolución de llamada devuelve un parámetro de objeto con los siguientes miembros:

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. Reinicia el carrusel

5.1 De hecho, cuando se ejecuta el método carousel.render (options), hay un objeto que devuelve la instancia actual. Este objeto contiene algunas propiedades y métodos para operar el carrusel actual.

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

6. Ejemplos

6.1. Código

<!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. Imagen de efecto

Supongo que te gusta