<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <style> body{ background-color: #555; height: 100vh; display: grid; align-items: center; justify-items: center; font-family: 'Helvetica'; } div#slide_wrapper{ width: 440px; display: flex; justify-content: space-between; height: fit-content; } div#slider{ width: 350px; display: flex; height: fit-content; flex-wrap: nowrap; overflow: hidden; } div.thumbnail{ min-width: 80px; min-height: 80px; cursor: pointer; display: grid; place-items: center; font-size: 30px; } div.thumbnail:not(:last-child){ margin-right: 10px; } div.thumbnail:nth-child(1){ background-color: darkturquoise; } div.thumbnail:nth-child(2){ background-color: goldenrod; } div.thumbnail:nth-child(3){ background-color: rebeccapurple; } div.thumbnail:nth-child(4){ background-color: powderblue; } div.thumbnail:nth-child(5){ background-color: firebrick; } div.thumbnail:nth-child(6){ background-color: sienna; } div.thumbnail:nth-child(7){ background-color: bisque; } div.thumbnail:nth-child(8){ background-color: navy; } div#slide_wrapper > button{ height: fit-content; align-self: center; font-size: 24px; font-weight: 800; border: none; outline: none; } div#slide_wrapper > button:hover{ cursor: pointer; background-color: dodgerblue; color: #fff; } </style> <title>Product Image Slider</title> </head> <body> <div id="slide_wrapper"> <button id="slide_left" class="slide_arrow">❮</button> <div id="slider"> <div class="thumbnail active">1</div> <div class="thumbnail">2</div> <div class="thumbnail">3</div> <div class="thumbnail">4</div> <div class="thumbnail">5</div> <div class="thumbnail">6</div> <div class="thumbnail">7</div> <div class="thumbnail">8</div> </div> <button id="slide_right" class="slide_arrow">❯</button> </div> </body> </html> <script> let buttonLeft = document.getElementById('slide_left') let buttonRight = document.getElementById('slide_right') buttonLeft.addEventListener('click', function() { document.getElementById('slider').scrollLeft -= 90 }) buttonRight.addEventListener('click', function() { document.getElementById('slider').scrollLeft += 90 }) </script>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)