El autor ya ha publicado un script de
carrusel , que también usa solo CSS y Javascript. Ahora echemos un vistazo a la secuencia de comandos del control deslizante. Se diferencia del carrusel en que solo un elemento es visible a la vez, y no varios, y los elementos no se desplazan, sino que se reemplazan lentamente por otro. Y mas En este control deslizante, solo se utilizan imágenes (diapositivas) como elementos, por lo tanto, se denomina control deslizante de imagen simple.
La navegación se realiza mediante las flechas "Elemento siguiente" o "Elemento anterior" y puntos indicadores. Las flechas y los puntos se pueden deshabilitar en la configuración del script. Los elementos se pueden mostrar con una parada en el primer y último elemento o en un ciclo cuando el último elemento es nuevamente seguido por el primero. Puede habilitar la visualización automática (desplazamiento) de los elementos, la duración de la visualización (el intervalo entre cambios) es ajustable. Cuando pasa el mouse sobre un elemento, se detiene el desplazamiento.
El control deslizante se ajusta automáticamente a cualquier ancho de pantalla de cualquier dispositivo. Puede verificar esto moviendo hacia la izquierda o hacia la derecha uno de los lados del navegador.
HTML: el código del control deslizante es estándar, con la excepción de uno: se coloca una pantalla frente a las imágenes, que es una imagen en blanco. Todas las imágenes y la pantalla deben ser del mismo tamaño. El número de imágenes es arbitrario.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
Las etiquetas <ul> <li> se usaron como contenedores, pero puede usar <div> <div> o <div> <p>. Las flechas y los puntos indicadores se colocan absolutamente en los respectivos contenedores. Para las flechas, se utilizan patrones en forma de corchetes triangulares que, si lo desea, puede reemplazarlos con sus propios patrones. El programa genera puntos, el número de puntos es igual al número de imágenes.
Todas las imágenes están apiladas, una encima de la otra, con posicionamiento absoluto en la esquina superior izquierda del contenedor envolvente. La pantalla evita el colapso del contenedor exterior. A todas las imágenes se les asigna la opacidad de la propiedad CSS: 0, excepto el primer elemento al que el programa de inicialización asigna opacidad: 1, lo que lo hace visible.
El desplazamiento de los elementos se lleva a cabo cambiando suavemente la opacidad de 1 a 0 para el elemento visible y de 0 a 1 para el siguiente elemento invisible. Por lo tanto, el elemento visible se vuelve invisible, y lo invisible visible. La suavidad de transición crea una propiedad de transición con una duración de 1s y una función de transición fácil.
CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
Para que el control deslizante se adapte a cualquier ancho de pantalla, para las imágenes debe especificar el ancho de la propiedad CSS: 100%. Para todos los contenedores de bloques (div, ul, li, etc.) también ancho: 100% o, si necesita ancho en unidades numéricas, solo ancho máximo o ancho mínimo.
Los estilos, como de costumbre, se incluyen en el encabezado. La secuencia de comandos se puede conectar en el evento de carga o al final del marcado HTML. El archivo de script del control deslizante puede verse así:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
El control deslizante se llama por el nombre de la clase sim-slider o por identificador. En el segundo caso, puede colocar múltiples controles deslizantes en una página.
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Javascript function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
Todas las imágenes son tomadas de fuentes abiertas.Gracias por su atencion!