Home
Courses
Blogs
Movies
More
When it comes to web design, a horizontal slider with infinite scroll can add a touch of dynamism and improve user interaction. In this tutorial, we'll guide you through the process of creating a sleek and responsive horizontal slider with infinite scroll using HTML and CSS
Begin by setting up the basic HTML structure. Create a container for your slider and populate it with the items you want to display horizontally.
<div class='scrollingcontainer'>
{Array.from({ length: 3 }, (_, inde) => (
<div class='scrollingcontent' key={inde}>
<Link href='/'><span></span><span>One</span></Link>
<Link href='/'><span></span><span>two</span></Link>
<Link href='/'><span></span><span>three</span></Link>
<Link href='/'><span></span><span>four</span></Link>
<Link href='/'><span></span><span>five</span></Link>
<Link href='/'><span></span><span>six</span></Link>
<Link href='/'><span></span><span>seven</span></Link>
<Link href='/'><span></span><span>eight</span></Link>
<Link href='/'><span></span><span>nine</span></Link>
<Link href='/'><span></span><span>ten</span></Link>
</div>
))}
</div>Next, add some styling to make your slider visually appealing. Set the container to hide the overflow and make the slider items display horizontally.
.scrollingcontainer {
width: 80%;
overflow: hidden;
white-space: nowrap;
position: relative;
display: flex;
margin: auto;
mask-image: linear-gradient(to right,transparent 0, black 128px, black calc(100% - 128px),transparent 100%);
-webkit-mask-image: linear-gradient(to right,transparent 0, black 128px, black calc(100% - 128px),transparent 100%);
}
.scrollingcontent {
display: flex;
white-space: nowrap;
animation: scroll-left 35s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.scrollingcontent > a {
display: flex;
color: white;
align-items: center;
padding: 0.4rem 1.5rem;
margin-left: 1rem;
border-radius: 5rem;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.089);
}
.scrollingcontent > a > span:nth-child(1){
width: 10px;
height: 10px;
margin-right: 4px;
position: relative;
border-radius: 50%;
}when we hover on slider slider should stop and we should be able to click on the div and redirect to our link
.scrollingcontainer:hover .scrollingcontent{
animation-play-state: paused;
}By following these steps, you've successfully created a dynamic and interactive horizontal slider with infinite scroll for your website. Users can now enjoy a seamless browsing experience, let the slider scroll infinitely.
Experiment with different styles, add images, and tailor the slider to match your website's unique personality. Keep in mind that user experience is key, so test your slider on various devices to ensure responsiveness.
Now that you've mastered the art of creating a horizontal slider, consider exploring additional features such as autoplay, custom animations, or integrating it into a larger gallery. The possibilities are endless, and with a touch of creativity, you can elevate your website's visual appeal and engagement.
Happy coding, and may your website shine with the sleekness of a well-crafted horizontal slider!
