SamSam123

Hey yall - i was so annoyed by this that i wrote some code for video carousels - this one has a click & drag to scroll function. <div class="video-carousel-container" id="videoCarouselContainer"> <div class="video-carousel-wrapper"> <!-- Add your video elements here --> <div class="video-item"><video controls><source src="VIDEO_SOURCE_1.mp4" type="video/mp4"></video></div> <!-- Add more videos as needed --> </div> </div> <style> .video-carousel-container { position: relative; max-width: 100%; overflow: hidden; /* Hide overflowed part */ } .video-carousel-wrapper { display: flex; transition: transform 0.5s ease; } .video-item { box-sizing: border-box; padding: 10px; /* Adjust the spacing between videos */ flex: 0 0 auto; /* Do not grow and shrink, but allow basis to be auto */ } .video-item video { width: 80%; /* Adjust video width to fit the container */ aspect-ratio: 9 / 16; /* This sets the video to a 9:16 ratio */ border-radius: 15px; /* Rounded corners for the video */ overflow: hidden; /* Ensures the video doesn't overflow the rounded corners */ } </style> <script> let isDragging = false; let startPos = 0; let initialPos = 0; const wrapper = document.querySelector('.video-carousel-wrapper'); wrapper.addEventListener('mousedown', (e) => { isDragging = true; startPos = e.pageX; initialPos = wrapper.style.transform.replace('translateX(', '').replace('%)', '') || 0; initialPos = parseInt(initialPos, 10); // Prevents the default dragging behavior of images/videos wrapper.querySelectorAll('video').forEach(video => { video.addEventListener('dragstart', (e) => e.preventDefault()); }); }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentPos = e.pageX; const diff = currentPos - startPos; const transformValue = initialPos + (diff / wrapper.offsetWidth) * 100; wrapper.style.transform = `translateX(${transformValue}%)`; }); document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; }); document.addEventListener('mouseleave', () => { if (!isDragging) return; isDragging = false; }); </script>