Tengo el código HTML y CSS, y me gustaría saber si alguien me puede ayudar a hacer que al mantener click en el botón de la derecha (si prueban el código, sería el rectángulo que aparece negro transparente a la derecha) se vaya navegando por la galería o "slide" hacia la derecha, hasta el final (es decir, que no sea en un ciclo infinito), y con el botón de la izquierda, obviamente hacia la izquierda (hasta el principio, y que ahí frene).
Les dejo un link para que se descarguen el pack de archivos por si lo necesitan, y más abajo les dejo el código HTML y CSS por si sirve.
Pack de archivos para descargar
HTML
Código HTML :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css.css"> </head> <body> <div class="container"> <div class="button-back">X</div> <div class="button-forward">X</div> <div class="image"><img src="images/dog.jpg" alt="" /></div> <div class="image"><img src="images/field.jpg" alt="" /></div> <div class="image"><img src="images/gnome.jpg" alt="" /></div> <div class="image"><img src="images/golf.jpg" alt="" /></div> <div class="image"><img src="images/leaf.jpg" alt="" /></div> <div class="image"><img src="images/pencils.jpg" alt="" /></div> </div> </body> </html>
CSS
Código CSS :
html, body
{
background-color: #444;
font-size: 10px;
margin: 0px;
padding: 0px;
}
.container
{
font-size: 0px;
height: 100%;
letter-spacing: -1px;
margin: 0px 0px;
overflow: hidden;
padding: 0px 0px;
position: absolute;
text-align: left;
white-space: nowrap;
width: 100%;
word-spacing: -1px;
}
.container .button-back,
.container .button-forward
{
background: #111;
height: 100%;
opacity: 0.5;
position: fixed;
width: 5%;
z-index: 1000;
}
.container .button-back
{
left: 0px;
top: 0px;
}
.container .button-forward
{
right: 0px;
top: 0px;
}
.container div.image
{
background-color: #333;
display: inline-block;
font-size: 1rem;
height: 100%;
letter-spacing: normal;
margin: 0px;
padding: 0px;
position: relative;
white-space: normal;
word-spacing: normal;
}
.container div.image img
{
height: 100%;
} 