Pure CSS Image Slider | Slideshow for Website | HTML CSS Carousel Tutorial

This tutorial is on creating a stunning pure CSS image slider for your website. In this step-by-step tutorial, I will guide you through the process of building an impressive image slideshow using HTML and CSS.
In this tutorial, you will learn the essential techniques and best practices for designing and implementing a visually captivating image slider. With the help of pure CSS, you can achieve seamless transitions, smooth animations, and a dynamic user experience.
Source Code: replit.com/@ProgrammingBasi/C...

[@user-jx4zj6ds7h]

very beautiful slider and the code is very short with no complex combinations. And you can add a lot of slides here. Respect from me.

[@dedshot114]

Wonderful very useful ❤🎉

[@andreasgoniotakis4655]

thanks mate, good job!!!

[@programmingbasic]

Glad it helped

[@ArturoN]

Thanks! it was very helpful and easy

[@programmingbasic]

Glad it helped!

[@joychakraborty3238]

Awesome 👍

[@programmingbasic]

Thank you! Cheers!

[@karlnapp6669]

Looks beautiful! I tried to insert a link to the pics with . Doesn't work. Can You help, please?

[@programmingbasic]

Wrap the slides with the tag and add a class.
Example:

and add the CSS to adjust the CSS position of the link class , like this:
.link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border: 5px solid red;
}
This should give you the ability to click the slide to navigate to page or sites.

[@priyadarsihalder9242]

Thanks! you can upload the code file too to make it more easy to make changes.

[@programmingbasic]

Yes sure. Code Link : codepen.io/Programming-Basic/pen/dywLWjX

[@user-jx4zj6ds7h]

if only three slides, the animation plays endlessly from beginning to end. But if there are more than three slides, the animation loops around three slides at the end. Can you help to solve this problem ?

[@programmingbasic]

I think you have not specified the animation delay. After adding the fourth or fifth slide, give animation-delay of 10s and 12s for .slide-4 and .slide-5.
example:
.slide-4{
animation-delay: 10s;
}
.slide-5{
animation-delay: 12s;
}

[@imransahim7279]

U should voice over ur content

[@programmingbasic]

Thanks for suggestion and yes.. I will do voice over in future videos. 👍