How to Create an Automatic Image Slider in HTML CSS & JavaScript

How to Create an Automatic image slider in HTML,CSS & JavaScript

In this video i''m going to teach you How to create an Automatic Image Slider in HTML, CSS and JavaScript, I've used HTML5 to make a page structure, then I've used CSS to design the slider and finally, I've use little bit JavaScript to change the images automatically.

So, after watching the complete tutorial, then you will able to understand everything as you want.

OnlineITtuts Tutorials cover many topics such as Web Designing, Web Development, Programming, Database, WordPress, Blogging, Google AdSense, Digital Marketing and TipsNTicks. I was made many videos for different categories, and I will share another helpful tutorial for different topics.

Support Me on Patreon

Follow Us on Facebook

Follow Us on Twitter

Follow Us on Pinterest

[abdullahwasim]

Sometimes coding can be so goddamn frustrating, thank u brother

[Young_prof]

<script type="text/javascript">

var counter = 1;
setInterval(function(){
= true;
counter++;

If(counter>4){
counter = 1;
}

};5000)

</script>

the code is not working for auto navigation sir.

[lubegatom]

Thak you so much brother, the tutorial has been really helpful.
God bless you.

[varunshankar]

Was really curious, as to whether i could use this code for multiple sliders in the same webpage, because the automatic slider starts to break when i try to implement this code for two sliders

[WppGabreu]

the script runs the first time just to set the counter to 1, losing 5s while stopped, you can set this at the beginning of the script, outside the loop and it won't have this delay at the beginning.

<script>
var counter = 1;
counter).checked = true;
setInterval(function()
{
counter++;
counter).checked = true;

if(counter>=4){
counter=0
}
}, 5000);
</script>

[Young_prof]

great work but there is no source codes for its responsiveness.

[chooyinkeat]

What if I dont set my body to display: flex, is there any different?