Front-end dos formas de realizar carrusel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui实现轮播图</title>
    <link rel="stylesheet" href="./css/layui.css" media="all">
</head>
<body>
    <h1>layui.carousel</h1>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
        </div>
    </div>
    <!-- 条目中可以是任意内容，如：<img src=""> -->
    <script src="./js/layui.js"></script>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>
</html>

Aviso

1) La clase="layui-carrusel" del elemento externo se usa para identificarlo como un contenedor de carrusel.

2) El atributo carrusel-elemento del elemento interior se utiliza para identificar el elemento.

Descripción de parámetros

opcional	ilustrar	tipo	valores predeterminados
elemento	Apunte al selector de contenedor, como: elem: '#id'. También puede ser un objeto DOM	cadena/objeto	ninguno
ancho	Establezca el ancho del contenedor del carrusel, admita píxeles y porcentajes	cadena	'600px'
altura	Establecer la altura del contenedor del carrusel, admitir píxeles y porcentajes	cadena	'280px'
lleno	Ya sea carrusel de pantalla completa	booleano	FALSO
animado	Modo de animación de cambio de carrusel, los valores opcionales son: predeterminado (conmutación izquierda y derecha) updown (cambiar arriba y abajo) desvanecimiento (cambio de desvanecimiento y desvanecimiento)	cadena	'por defecto'
auto-reproducción	Ya sea para cambiar automáticamente	booleano	verdadero
intervalo	Intervalo de tiempo de conmutación automática, unidad: ms (milisegundos), no menos de 800	número	3000
índice	Índice de entrada inicial inicial	número	0
flecha	Cambia el estado de visualización predeterminado de la flecha, los valores opcionales son: hover (pantalla flotante) siempre (siempre mostrado) ninguno (nunca mostrado)	cadena	'flotar'
indicador	Posición del indicador, los valores opcionales son: inside (dentro del contenedor) afuera (fuera del contenedor) ninguno (no mostrar) Nota: si se establece anim:'updown' , este parámetro no será válido	cadena	'adentro'
desencadenar	Activar evento para indicador (para alternar)	cadena	'clic' (clic predeterminado)

Efecto

Cambiar a carrusel

Agregar archivos de recursos de imagen

Establecer los recursos de imagen que se muestran en el carrusel

Modificación de la columna del carrusel

Cambie el div de la columna original a una etiqueta img para cargar imágenes, de modo que se puedan mostrar todas las imágenes, y si solo se configura img dentro del div, se mostrarán algunas imágenes.

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
    </div>
</div>
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div><img src="./images/1.jpg" alt=""></div>
        <div><img src="./images/2.jpg" alt=""></div>
        <div><img src="./images/3.jpg" alt=""></div>
        <div><img src="./images/4.jpg" alt=""></div>
        <div><img src="./images/5.jpg" alt=""></div>
    </div>
</div>

Efecto 1

Efecto 2

Cambiar hacia arriba y hacia abajo en su lugar

El parámetro anim en el script se cambia a 'updown'

var carousel = layui.carousel;
// 建造实例
carousel.render({
    elem: '#test1'
    ,width: '60%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    ,anim: 'updown' //切换动画方式
});

Efecto

evento de alternancia

Agregue lay-filter= ” test1 ” al contenedor layui-carousel

Ahora mismo:

<div class="layui-carousel" id="test1" lay-filter="test1">

Evento de cambio de enlace en el script

// 触发轮播切换事件
carousel.on('change(test1)', function(obj){
    console.log(obj.index); //当前条目的索引
    console.log(obj.prevIndex); //上一个条目的索引
    console.log(obj.item); //当前条目的元素对象
});

Vista del controlador

Aquí puede configurar el negocio que cambia la columna correspondiente para activar el evento correspondiente.

Swiper se da cuenta del mapa del carrusel

descargar swiper

Descargar Swiper - Sitio web chino de Swiper

descargar a locales

Descarga lo último al entorno local

deslizador de carga

Colocar archivos estáticos

Los archivos que deben usarse son los archivos swiper-bundle.min.js y swiper-bundle.min.css.

Después de la descompresión, busque los archivos swiper-bundle.min.js y swiper-bundle.min.css y colóquelos en el directorio de recursos del proyecto.

Importar archivos estáticos

Introduzca los archivos swiper js y css en la página html respectivamente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swiper实现轮播图</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
<script src="./js/swiper-bundle.min.js"></script>
</body>
</html>

añadir contenido html

El contenedor predeterminado de Swiper7 es '.swiper'.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!--导航等组件可以放在Swiper容器之外-->

Establecer la altura y el ancho del deslizador

Debe establecer la altura y el ancho del contenedor del swiper antes de inicializar el swiper; de lo contrario, no se puede usar.

<style>
    .swiper {
        width: 60%;
        height: 300px;
    }
</style>

Inicializar Swiper

<script>
    var mySwiper = new Swiper ('.swiper', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
</script>

De esta manera, el swiper se puede utilizar para la conmutación normal y luego, si puede modificar los parámetros a través de la demostración para lograr el efecto deseado.

Cambiar a carrusel

Modificación de contenido HTML

<div class="swiper-wrapper">
    <div class="swiper-slide"><img src="../images/1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="../images/2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="../images/3.jpg" alt=""></div>
    <div class="swiper-slide"><img src="../images/4.jpg" alt=""></div>
    <div class="swiper-slide"><img src="../images/5.jpg" alt=""></div>
</div>

Efecto

Establecer interruptor de clic de buscapersonas

Agregue parámetros en la configuración del buscapersonas en el script

// 分页器
pagination: {
    el: '.swiper-pagination',
    clickable: true,
},

cambio automático

Establezca la propiedad de reproducción automática en el script y el intervalo de tiempo es de 3000 milisegundos

autoplay: {
    delay: 3000,
    disableOnInteraction: false,
},

Resumir

Tanto Layui como Swiper pueden implementar la función de carrusel con relativa facilidad. La diferencia es que Swiper puede realizar más funciones de carrusel, estilos más hermosos y más ejemplos.