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%; }