How To Make Image Slider Using HTML CSS JavaScript

Learn How To Make An Image Slider Using HTML CSS JavaScript with Autoplay and Loop slider, Create JavaScript Image slider with Loop and Auto play
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we are going to create an image slider with the help of swiper js. In this image slider we will add swipe control to change the slides. There will be next and previous button and pagination dots that can be used to change the image slides. We will also add the auto play in this image slider so that the images will be sliding automatically in a regular time interval.
Download Images:
drive.google.com/file/d/1wiIU...
Swiper js: swiperjs.com/get-started
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Image credit:
unsplash.com
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

[@zilolaixtiyorova2544]

that's so clearly i have ever seen before,after i watched this video , i made a lot of various sliders, thank you very much

[@eightelms]

Nice tutorial. Clear and concise, 5* worth. Thanks 👍

[@user-rv9jq6qf3p]

Thank you so much! Great and easy-to-follow tutorial!

[@yaredhaile9322]

i love how your videos are short and to the point and very informing.

[@Neighbour11]

Sir.... literally...i was very confused of slider...but u really did awesome,none people on RUclips explained like uu... fantastic 🥳🥳🤩🤩🤩😍😍

[@dogedibest]

Amazing tutorial man👍 I've been struggling with making an working slider for 2 days. Thank you!!!

[@nestorgermanavilaronderos6715]

Excelente vídeo, la explicación y el ejercicio fue muy fácil de entender, el idioma no fue un impedimento para poder entender y aprender, gracias por sus aportes al conocimiento, dios lo bendiga.

[@franciasantana595]

You're the best! I have to learn some coding to graduate as designer so it was super hard for me to understand this kind of stuff, until I found your videos. Love you explain so simple!

[@logoquotes3737]

Love this tutorial. Very helpful to me. Thank you sir

[@freckspecks]

Outstanding tutorial!! Thank you so very much.

[@gustafgyllensporre5526]

The king of HTML/CSS tutorials!

[@stefanaksic1752]

true

[@earthlygamer7142]

Yup true

[@promise22]

I swear down....real king

[@RomanKnav]

Thanks! Swiper makes it so easy to implement sliding images.

[@aqsakhan8692]

I don't know how to say thanks...God Bless you always sir

[@tygarbhard2077]

Thank u so much I have been trying to do this almost everyday

[@reaver2615]

so good, it helps me a lot!
thank you so much!

[@ajanigloryadeniyi760]

Indians are the best in tech!
From Nigeria 👍

[@sargispetrosyan7120]

Great content and great man👍🏻👍🏻👍🏻 thank you for your time and work ,you are awesome

[@LetsBland9411]

You are the best RUclipsr and problem solver o have ever seen. Keep it up I had a reason to subscribe and ring the bell to this channel

[@user-vr9uk3hs1s]

Bro , it is an amazing video,I am very thankful to you.I wish only good.You are the best))))

[@cgianimationtv1828]

Sir, honestly you are good 👍😊 in web development... I can't believe you did this exactly 💯 the way I imagine it and want it ... Kudos sir 👍

[@GreatStackDev]

Thanks a ton

[@tersintech6779]

Great! I could say that swiper as alternative for boostrap carousel slider, swiper provides the easy way more several cool tricks with swiper classes and selectors...- thanks -cheers !

[@andreeas.1325]

Hi! Can you make a FAQs section video, please? I tried to make this section watching others youtube tutorials, but it's looks horrible :)) Your tutorials are amazing

[@ANISSYAZWANIROZAINI]

hi, i don't understand the part where you add the class container. what is it for? if i had build the background but just want to add the photoslider, should i remove the container part or is it important?

[@divyasai5406]

very easy to understand by the steps and working good 👌

[@venugopalkumbha9109]

Great work. Keep Post more videos like this small projects. .

[@panzagamesplay902]

best channel i have being watching your videos and your javascript are always simple and short

[@learn_english216]

Sir you are great.... I was searching this from last many days.... Your method is working... Thank you sir.. It's working.... I am gonna subscribe you sir

[@totosung1]

Thanks Master, This's Nice Tutorial!

[@telescope3801]

That's amazing!!! Love from Bangladesh.

[@coversongs-ih3ci]

Thank you very much! VERY HELPFUL!

[@zubairshahzad3486]

bro it was very helpful thank you so much for this helpful video😊

[@creativejana]

Thank you very much for your Tutorial and your Video!!! 🙏This helped me 👍 You are the best!

[@lizz.garleb]

Thanks you so much for the tutorial❤ Excellent! Straight to the point and great explication

[@newtycoon8805]

In the pagination, why did we use .swiper-pagination-bullet-active{}. I searched word about bullet-active in the HTML, and JavaScript codes, but there was not. I mean, How do we use bullet without declaring it?

[@jabedhasanfuad8929]

It’s so good. Here you can use some bootstrap tag. But overall it’s fine.❤️❤️

[@devenpatel4684]

Sir can you make video on this topic but without copping code?
Your all videos are wonderful.
Thanx for you tuts.

[@EricAstarcom]

very good. It will be appreciated if you add autoplay text slider with navbar in the next video. thanks

[@Mahmoudery]

Oh my ! Just on time 💥

[@UniqueDrawing2Color]

Very easy to understand.... Thank you so much

[@ahmedraafat9232]

Thank you very much, a wonderful explanation and an excellent Arabic translation, and the application was successfully completed. Thank you ♥️♥️

[@sawblade37217]

Thank you for your tutorial. I applied the information in this lesson and my fixed navbar is obscured by the image gallery when I scroll down the page. Any suggestions? I need the navbar to remain visible.

[@AbdulJabbar-vf2dc]

You are the king of make thingss simpler

[@sharonarul7573]

short and precise...thx!

[@lexurrea8977]

Very Helpful thank you so much buddy

[@aubreyrosepescadero3643]

Thank you. I have a problem though, it looks like the images are covering my fixed footer. How should I fix? Now my footer is beneath the images when i scroll through it.

[@abdulmuqaddam836]

Really easy way ... love it

[@MuhammadImran-ou2yw]

Great sir!!! Thank you so much.

[@mirzayefx1443]

Thank you so much mate!

[@cathylim2113]

It was really helpful! Thanks!

[@abulbashar68]

It is very helpful. Thanks.

[@mwesigyerob1576]

very simple and straight forward, thank you

[@GreatStackDev]

glad you like this tutorial to make image slider

[@manojsinha9959]

You are Always good. Your voice is a gentleman voice.

[@awaisrajput9921]

amzazing content broooo this video deservers millions of views so simple and ezy method for slider
sss

[@anishrai4780]

Thank you for this video. It Helped me alot

[@Aditya_Soni_23]

Thanks a lottttttttttttttttttttttttttttttttttttttttttttttttttt, grow well like this and may your channel go on the top, you have helped a lotttttttttttt, now what ever you wish it will come true, :)

[@ziadhodeeb9056]

I am a beginner in programming and I am learning from RUclips, can I be like you,I love you so much❤❤❤

[@alexddks6818]

Thank you so much, would be nice to know how swiper works!

[@bekiteshome4670]

Thank you!
you are the best

[@carlerikssonskogh5468]

is there any way that I can add a play/pause button for the auto loop?

[@kusumanarasimhacharya4721]

sir this video is very usefull and too easy ... thank you sir

[@sosobobo8157]

guy you're great easy peasy and get the checkmark of youtube you merit it it's an order

[@michaelraymondlegg210]

really good tut i have one slight problem when it goes back to the first picture it cuts of a small proportion the image

[@mariedominiquejeanmichelat9937]

Superbe vidéo explication claire et simple. C'est très instructif. merci pour tout.

[@suhaspp8885]

In applelaptop on bottom when we place cursor on the elemnts it will be hilight can you do video on that

[@aminabintiali-470]

thanks for your tutorial!

[@J4Jevins]

In 2:17 you said height "100vh". Actually what is the use of vh ? I'am having this doubt and would get the answer I hope....

[@emekaihiere1964]

I have to subscribe to your Chanel brother I love your lesson 🥰💕
Thanks alot

[@earlsamm7421]

Awesome one. Thanks man

[@tinablair]

Excellent tutorial. So happy I found it. I customized it for my needs but it gave me the perfect start. Thank you!

[@GreatStackDev]

Glad it helped!

[@vivekrajput2233]

Mojj kr di sir thank So much 🙏🏻🙏🏻🙏🏻

[@manhhoangtien540]

thank you for your helpful video. What the VS code theme do you use? I like that theme.

[@kmalasan5471]

Thank you very much mah friend

[@JorgeTorres-mx7bx]

Thanks very much!!

[@abdulahadgazi3460]

Thank you very much sir

[@akashmondal382]

Thank you for the video..

[@Nursaidbek2007]

Thank you for your lessons. They are very interesting

[@GreatStackDev]

Glad you liked this image slider tutorial

[@divyaprakashnathtiwari8860]

thank u it's a wonderful video

[@vrajeshshetty9194]

Love from Andheri❤❤❤

[@amarnathvv]

Sir, How to add this in an gallery page where we can view each image by clicking on it........

[@topg_club009]

Thank you very much, this really helped :D

[@GreatStackDev]

Glad it helped!

[@Mansemansemanse]

Thank you very much🎉🎉🎉

[@doedits2842]

Hello
I have a question ki is it good to create sliders, carousel or galleries through pre built liberaries or should create them through scratch by using pure javascript?

[@slavkoostojic2514]

Depends on the employer. Soma one it pure some dont care :P

[@speed-cn614]

Thanks for the help

[@lev_bul]

hello sir
awesome nice super big like

[@raven.4815]

Great tutorial!

[@danishahmed8213]

can we use video instead of img tag?

[@abuasim1000]

The best way of teaching my dear. Excellent video...

[@GreatStackDev]

Thanks Asim, Glad you liked this video to make image slider

[@thebig_jj_]

how can i change th color of the swiper pagination bullet that are inactive?

[@hrushikeshwagh.]

Superb create 👌👌👌

[@chetanprajapat6959]

thank you so much sir ❤

[@itspawanpoudel]

Thanks for this

[@mahdinouira3261]

i have a question, how can i make a text that changes with every slide, and how can i can make a text appear when i click on picture.
your video is the best on youtube, this is the forth and ONLY video that worked for me.
thank you dear friend
from tunisia
so glad when i clicked like, i wish i could give 11 likes

[@alexlawrence7596]

In the script code, I get a ReferenceError saying 'Swiper' is not defined. Any Help?

[@paragpiprewar5691]

Very nice video sir 👍

[@tanishkraniwal2813]

This video 📷 is more then more helpful for us thanks 👍 bro thanks a lot 😊

[@GreatStackDev]

Thanks Tanishk, Glad you liked this tutorial to make Image slider

[@sanctamatthia1761]

good tutorial, simple explanation

[@krokantech8284]

how can I do that like thumbnail photo ? can you give me some information

[@technicaltrickdarpan5689]

Congratulations sir my problem is solved

[@nikunjusadadiya97]

Good work In Few minutes bro

[@nikunjusadadiya97]

i like it....

[@drejgovka]

it works but please. how to change color of non active pegination bullet? Or add some border just something..