How To Make Image slider With Animation Using HTML And CSS | Web Design With Animation

[@steventyler988]

The best and simply solution to start a great slider with buttons and others stuffs Thanks bro

[@mvlogsofun]

thanks man, their is no one like you.

[@rhymekidstv]

Wow!!! This is just amazing. Easy to understand. Thank you

[@GreatStackDev]

Glad you think so!

[@Rudraraju.Kishore]

Big fan bro , inspired from you and started making awesome videos. Support

[@amazingworld2134]

I don't know how I have to be thankful to you for this amazing tutorial video ,its amazing and super.

[@opeyemiakindolie640]

You are so creative! Thank you so much ❤

[@ahmedgaming2571]

You are such a great man❤ Helped me a lot for my projects love you brother keep growing hope you will get 10M subs❤

[@memecreator5846]

My favorite channel 👍😄

[@hash5075]

Easytutorial god of youtube design

[@kodindoyannick5328]

follow easy tutorials make my learning very easy. Thanks you sir.

[@rezzzmusicals]

You are very great man I am so inspired on your teaching and I am your new subscriber

[@GreatStackDev]

Thank you so much. Hope you will like this tutorial: kzbin.info/www/bejne/pYq1lZRtitmonqM

[@halimaameur3342]

the best one ever ! thank you, i hope u can make more videos about javascript

[@mollaenterprise7824]

Thank you bro..love you from Bangladesh ❤️❤️❤️❤️❤️

[@GreatStackDev]

Thanks

[@NiltonOliv]

Is it possible to use small videos instead of images? If so, what should I change?

[@BroMiyuki]

Great video. Followed it all through but only the images don't change.😪

[@softmerit25]

Wow!. So amazing. Great tutorials. Please, I will love to know the actual size of the images in pixel? Thanks a bunch.

[@xuanlocnguyen7563]

Wow!!! thanks pro. Easy to understand

[@095_shaniabalkhi9]

His tutorials 🔥

[@SushilKumar-ic1kv]

Osm sir simple method i will understand...

[@GreatStackDev]

Thanks Sushil bro

[@KashifKhan-tz8py]

Awesome Explanation

[@UmairKhan-cm8rt]

Plz Make Responsive This Design. This Design Looks Very Great on PC. But Mobile screen Its Looks Very Dirty. Plz MAke a one more video.

[@stevenarevalo2308]

Very good for beginners bro, a favor could you put the images in the tutorials to download please

[@GreatStackDev]

Hi Steven, I use to give link of image, if i use any custom made images by me. But in this tutorial images are common, So i just gave images original website link in description. You can make this design with any random image also. Thanks for comment

[@stevenarevalo2308]

​@@GreatStackDev I am a beginner and I am doing a project with parallax, and I am not able to advance, you have excellent knowledge I would like if you do a tutorial of number 6 and 7 parallax of this link kzbin.info/www/bejne/aYSQd5Z5p8uChq8 please

[@wajudkareem7565]

Thanks for this !

[@appletech2088]

Very usefull for beginners

[@GreatStackDev]

Thanks a lot

[@speedykiller619]

At the beginning of the video, there's an armchair I like. Could you show me how I can buy it?

[@josephdanquah3166]

awesome video....Thank you

[@mulualemdarimo2850]

Great video ! thanks and keep it up

[@onlineteacher4295]

Thanks for the toturial

[@mariamkhudabukhsh613]

amazing and very help full content thanks for this sir let me know one thing sir all image size are same? please reply i m make a project

[@chadrackkyungu2167]

very easy to understand thank sir

[@vibist8448]

You are the best

[@eustaciegold5924]

Hey, Greatstack. I like your design and even tried it myself; however, when displayed on cellphones, the slider fill the entire viewport; I'd like it just a percentage of the viewport, like a youtube video. How is that done?

[@MakeJokeTo]

Sir isko responseiv kaise banaye please help

[@mostafatagmouti338]

Thank you. plz I have a question, how we can play videos instead images ? Thank you.

[@webdevelopement6887]

Bro you are amazing

[@certifiedolaitan5848]

Thank You ❤

[@markchristophercatapia2823]

Great tutorial, keep it up bro

[@ЛеонидБорисов-ч5х]

You use var and getElementById in javascript in 2020?

[@zaighamabbas5667]

Great work bro

[@RolandOgbue]

Mine didn't work, photos not changing but every other thing works fine. What do i do? sliderImg.src = images[i]; i++; the "src" seem to be the problem, what do i do?

[@romuloalves9349]

Ótimo vídeo parabéns 👍.

[@nikitadeshmane1368]

Sir Thank you for this video But whats the resolution of the imges?

[@wisdomjordan]

how can i add buttons for viewing the previous or next image

[@daljeetkaur-fv7fv]

Plz sir make this project in notepad++ because some functions not working in notepad++ plz..!!

[@BytesBard]

Sir can’t we do the same without JS by simply applying different background images in the keyframe like you did for the animation. Like if we set a background image in the body section and apply a transition property there and then change the background images with keyframe.

[@GreatStackDev]

Yes Upendra, That also works, I such case you need to set css animation for 12seconds and device the keyframes in 16 part. in first 1 parts background image will be same, then in next 4 parts there will be next image. but that transition was not looking that good. so i used JS. Thanks for your comment

[@BytesBard]

Easy Tutorials Thanks for your response sir, that was just a general query to know if it will work since I’m beginner and started learning by following you. But I’ll be great full if you would start Advanced Java Tutorial. Your way of explanation is awesome. Please consider if you find it valuable.

[@rahuljha1713]

Please make a video on how to make online exam website

[@brianjett1446]

Do all of my images have to be the same size or can I use the css for that.

[@GreatStackDev]

ratio should be same as laptop screen size. 1920x1080px

[@shraddhakumavat1973]

Sir which text editor use in this video......

[@BytesBard]

Sir please continue Java course.

[@tiktokexchange5396]

Sir, it would be pleasure for me if you upload a video on how to make a newspaper theme/template for blogger in one video....in hindi language .. thank you in advance

[@GreatStackDev]

Hi Adiba, I never made any tutorial of Blogger/Blogspot. Because i think WordPress is the best for blogging. You should start blog on wordpress and you can start with Free hosting like "infinityfree" when you get good traffic you can move to low price hosting like Hostinger. Thanks for your comment.

[@tiktokexchange5396]

@@GreatStackDev thank you sir for your suggestion.. Sir i wanna learn theme creating.. Sir can you be kind to upload a video on how to make a newspaper WordPress template.. Please makeva video on it in Hindi..

[@Ahmed_R0]

You only front end developer???🌹

[@heybambang67]

Thank you

[@GreatStackDev]

Thanks for comment

[@budgetwithjai2669]

new comment. how can we make the click buttons responsive?

[@shantajha1373]

Awesome 👍

[@GreatStackDev]

Thanks 🤗

[@kavyapokharel4714]

Nice video

[@GreatStackDev]

Thanks Kavya

[@xa4official]

hi, how i can change the background image with different screen size, because it not work in @media screen

[@KaranYadav-qp2oo]

codekky.blogspot.com/?m=1

[@mrmoniindbank4827]

thank me for watching? or thank you for been very generous

[@gracebavula2166]

can you make a video for how to put video on website plz

[@GreatStackDev]

yes already have such tutorial: kzbin.info/www/bejne/p6api2xvm8l-qM0

[@harshsahal902]

Sir please give me image and icon link you used in that website. I make website by follow your tutorial but I get one error. In my website, I can use image and logo links. My four background image is not properly working. When I open the website only first image can change fasther while I can set timeout is 5000ms.please help me sir I am a big fan of you and your channel Iwatch every video of your channel and I give like to every videos.

[@harshsahal902]

If anyone knows about this problem than please help.

[@mosesbarigo5349]

I tried also and stuck with the same issue, background image did not change. I rechecked the coding 3 days now and couldn't find the issues.

[@josuehj.ramirez8418]

good tutorial friend, if you pass me the link of the project?

[@GreatStackDev]

Sorry, I can't put the code link in public, People just download it and close the video without watching it, Then what's the use of making video tutorials. Please watch this tutorial and try to make this website yourself, if you get any issue, you can write me on email, will help you with the code if required.

[@anishavlogs7049]

Bhai interior ka logo kaise download kiya wo bhi bina background ka

[@youssradebbali7726]

Thaaaaaaaaaank youuuu🤗💘💘💘💘💘💘💘❤💘❤💘❤

[@JONSI853]

i have a problem because the class button apply the margin to the two buttons 0 10px an they stay in the left but i fix it great tutorials

[@dahanayakas.d131]

thankyou , but script part is not work (slide transition) i check code but i cant find eny wrong code in my code ... i state below my code please help me. Home LET'S START TO DESIGN Get All The Elements You Need For Your Designs In One Place. CATEGORY BROWSE var slideimg = document.getElementByID("slideimg"); var images = new Array( "images/1.jpg", "images/2.jpg", "images/1.jpg", "images/2.jpg" ); var len = images.length; var i = 0; function slider (){ if(i > len-1){ i = 0; } slideimg.src = images[i]; i++; setTimeout('slider()',3000); }

[@malikahamed9587]

How I change it as a responsive?

[@matjulius]

How do you do the image slider at the background

[@mdridoy9896]

nice bro

[@rohitchaturvedi693]

Hello , I am Naval officer , i want to learn full coding , since 1 month i have started learning and i sit for atleast 6-8 hrs everyday doing coding practically , by creating some website using css js html.Please suggest me weather i can learn fullcoding in 4-5 years?if i continue with this enthusiasm?I am learning cz , this is what i wanted to do since childhood , but i diverted myself to become navy officer.

[@hamidmehmood6728]

Bro doing that work 2-3 months more you will get all answer of your questions ....i learning code 3 months ago i realizing i become full stack developer in 9-10 months if i work without giving up .... including html css JavaScript and for backend Django... Just keep coding 😊...

[@rohitchaturvedi693]

@@hamidmehmood6728 thanks for your reply! it was satisfying ! :)

[@rohitchaturvedi693]

@@hamidmehmood6728 If you dont mind please share your facebook page. Thanks

[@jubairjubu4411]

can I have this source code ?

[@jadhavpravalika423]

Sir , I'm unable to change the images in background

[@sugathsuranjeewa]

bro,when i add a background image but it's not showing in the browser

[@KaranYadav-qp2oo]

codekky.blogspot.com/?m=1

[@MusicPsycho]

Sir please provide us source code of every video

[@GreatStackDev]

All video's source code is available in Members only community post. if you really want to learn then please watch the video and try to make it yourself. If you get any issue, you can contact me on email or facebook

[@FreenbeckyisLove143]

Im 26 yrs old. Do u think I can still learn how to code easily?

[@imsabbar]

ofc you can ,It's never too late to learn anything! Best of luck to you .

[@antorroy5881]

Can you please give us the link of logo and image

[@eustaciegold5924]

cool

[@qwertyasd3228]

bhai icon kase bnaya link to do

[@rachitsoni8822]

Please tell me where to download those icons 🙃

[@sanimsanim2014]

Sir.... Please we want to see you... Please... It’s our request.....

[@GreatStackDev]

You can find my Instagram link in description.

[@PiranhaGaming01]

are not shown in my website

[@santhosh_0400]

Pls do postal system in php plz

[@ЛеонидБорисов-ч5х]

But thank you so much

[@steveotieno8441]

you cool bro

[@saggysshorts]

sir i tried it but my background image are starching Please tell me any solution on it....

[@GreatStackDev]

use image of 1920x1080 dimension

[@dilkashshaikhmahajan45]

It is responsive or not

[@GreatStackDev]

No, This video concept was just to add Zoom In and Zoom out effect in images. You can check my other videos where i have added media queries for responsive design. Thanks for comment

[@pollorencecanja9759]

What's the size of the Photo you using sir ?

[@GreatStackDev]

1920x1080

[@noback1290]

omg👍🏻 thanks a lot🥹

[@GreatStackDev]

You're welcome!

[@bakhodirbadalov6713]

how can i get the source?

[@Octopiclntensions]

how do i access the source code, ???

[@salmanghazi4073]

How to make responsive

[@GreatStackDev]

Using Media Queries CSS, Please check my other responsive design tutorials. This concept was just to add Zoom and Zoom out effect in images. Thanks for comment

[@ideareality9089]

how to get soucre code

[@wolfenrico]

Thank you for the great tutorial. Unfortunately, I can't use it for small devices. it is not responsive. The photos are squeezed. Can you help?

[@aydencharlie2833]

i was planning on implementing 4 mobile

[@hardevsinghbijarniyahardev3755]

Give the source code of HTML and CSS file 🙏

[@youcefboutiche9496]

can you write the codes please

[@DabeerDA]

icons k link dy dou

[@durgalalrana1317]

Sir can I get your code

[@farheenfarooq1749]

Could you please explain javascript while coding. Also please check your fb messenger I have asked a question regarding a video of your

[@asgalib7782]

hi

[@rajumamidi8759]

Size of images

[@GreatStackDev]

always use 1920x1080 for full screen images

[@henrymuhindi1858]

Topfun🗯

[@Heartless0RD]

title me java likhte hue tera kuch ghis jata kya 9mint barbad