#clase
Crear un SLIDER
¿Qué es un slider en html?
Un slider de imágenes, también es conocido como Carousel o
slideshow, es un elemento más que conforma una página web,
permitiendo que se puedan ver multitud de imágenes o textos
en un mismo espacio, apareciendo y desapareciendo
automáticamente o pulsando un botón.
• AUTOMATICO
• MANUAL , CON CONTROLES
• CON ENLACES
En un slider automático el contenido
cambia cada cierto tiempo.
Con controles, podemos hacer que cambie
presionando las flechas que se encuentran
en los laterales o los puntos que se
encuentran en la parte inferior.
ESTRUCTURA HTML:
<section class="superior"> Necesitamos crear una
<div class="contenedor"> clase slider, un div que
contenga al slider y en su
<div class="slider">
<ul>
<li><img src="oro2.jpg" alt=""></li> interior una lista donde
<li><img src="oro3.jpg"
<li><img src="oro2.jpg"
alt=""></li>
alt=""></li>
cada imagen es un
<li><img src="oro2.jpg" alt=""></li> elemento <li>.
</ul>
</div>
</div>
</section>
Estilos del Slider overflow define qué se debe
mostrar cuando el contenido se desborda
.slider{ de los extremos superior e inferior de un
width: 90%; elemento. (visible/hidden/scroll)
height: 350px;
display
margin: auto;
define el posicionamiento
overflow: hidden;}
flexible del contenedor <ul>
el diseño se adapta de forma flexible a la
.slider ul{ pantalla donde se muestra, siguiendo el
padding: 0; concepto del diseño receptivo.
display: flex;
width: 400%;
animation: slider 10s infinite alternate;} animation definimos la animación
Nombre de la animación
.slider li{ Duración de la animación
list-style: none; Cantidad de veces que se repite
Retrocede al finalizar o vuelve al pricnipio
width: 100%;}
.slider img{
width: 100%;}
El secreto de las ANIMACIONES!!!
https://www.emezeta.com/articulos/animar-personajes-con-animaciones-css
STOP!!! Vamos a entender las animaciones…
Están conformadas por fotogramas claves y en css
se denominan keyframes
Ejemplos:
.container { animation: color-change 5s infinite; }
@keyframes color-change {
from { background-color: cyan;}
to { background-color: orange;}
}
Experimentemos!
<div class="div_ani">
<p>animacion sencilla de un div</p>
</div>
@keyframes movimiento-diagonal{
from {
div{
font-family: 'Arial'; left: 0;
background-color: #99cc00; top: 0;
text-align: center; }
font-weight: bolder;
position: relative;
width: 80px; to {
margin: 15px 2px 15px 15px; left: 200px;
padding: 20px 40px;
vertical-align: middle; } top: 200px;
}
.div_ani{ }
-webkit-animation:movimiento-diagonal 5s 4;}
@keyframes mover {
0% {top: 0px; background: blue; left: 0px;}
25% {top: 300px; background: red; left: 0px;}
50% {top: 300px; background: green; left: 600px;}
75% {top: 0px; background: yellow; left: 600px;}
100% {top: 0px; background: blue; left: 0px;}
}
p { animation: 3s infinite alternate slidein; }
Animar un texto p{
animation-name: slidein;
animation-duration: 3s;
Se puede reemplazar por la
<p> Estamos haciendo que un texto se animation-iteration-count: versión abreviada:
deslice por la ventana del navegador. infinite; p { animation: slidein 3s infinite ; }
En este sencillo ejemplo el elemento }
<p> se desliza por la pantalla
entrando desde el borde derecho de la
ventana del navegador. </p> @keyframes slidein {
from {
margin-left: 100%;
width: 300%; }
to {
margin-left: 0%;
width: 100%; }
}
Keyframes del Slider
@keyframes slider { Del 0% al 20% le estamos indicando que
debe permanecer en la primera imagen,
sin moverse.
0% {margin-left: 0%;}
20% {margin-left: 0%;} Del 25% al 45% debe permanecer en la
posición -100%, es decir, la segunda
imagen.
25% {margin-left: -100%;}
45% {margin-left: -100%;} Del 50% al 70% debe permanecer en la
posición -200%, es decir, la tercera imagen.
50% {margin-left: -200%;} Del 75% al 99% debe permanecer en la
70% {margin-left: -200%;} posición -300%, es decir, la cuarta imagen .
75% {margin-left: -300%;}
100% {margin-left: -300%;}
}
