'Continuously scrolling slider with drag functionality
I'm trying to make a continuous slider, that scrolls infinitely with no easing from right to left with no gap at the end of the div, with a possibility of grabbing it and dragging it left or right. I had no luck with Swiper (freeMode, loop and autoplay props don't really do the trick) and OwlCarousel. Maybe I could add some JS or is there any library that somebody maybe used that could come in handy?
HTML
<div class="container-fluid">
<div class="continuous-slider">
<span class="continuous-slide">Lorem ipsum dolor sit ament... and a lot of text that's wider than 200px </span>
<span class="continuous-slide">Lorem ipsum dolor sit ament... and a lot of text that's wider than 200px </span>
</div>
</div>
CSS
.container-fluid {
width: 200px;
overflow: hidden;
}
.continuous-slider {
display: flex;
cursor: grab;
transform: translateX(0);
animation: tdkSlider 50s infinite linear;
}
@keyframes tdkSlider {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
