Reliable energy for your world

.carousel-container { position: relative; width: 100%; overflow: hidden; } .items { display: flex; overflow-x: auto; scroll-behavior: smooth; padding: 0; margin: 0; list-style: none; } .item { flex: 0 0 auto; /* Prevent the items from shrinking */ } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px; z-index: 1000; } .left-arrow { left: 10px; } .right-arrow { right: 10px; } .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.7); } document.querySelector('.left-arrow').addEventListener('click', function() { document.querySelector('.items').scrollBy({ left: -300, // Adjust the value to scroll by the desired amount behavior: 'smooth' }); }); document.querySelector('.right-arrow').addEventListener('click', function() { document.querySelector('.items').scrollBy({ left: 300, // Adjust the value to scroll by the desired amount behavior: 'smooth' }); });