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

[@memecreator5846]

My favorite channel 👍😄

[@hash5075]

Easytutorial god of youtube design

[@mvlogsofun]

thanks man, their is no one like you.

[@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❤

[@opeyemiakindolie640]

You are so creative! Thank you so much ❤

[@amazingworld2134]

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

[@Rudraraju.Kishore]

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

[@rhymekidstv]

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

[@GreatStackDev]

Glad you think so!

[@NiltonOliv]

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

[@mollaenterprise7824]

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

[@GreatStackDev]

Thanks

[@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

[@BroMiyuki]

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

[@KashifKhan-tz8py]

Awesome Explanation

[@vibist8448]

You are the best

[@wajudkareem7565]

Thanks for this !

[@095_shaniabalkhi9]

His tutorials 🔥

[@halimaameur3342]

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

[@kodindoyannick5328]

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

[@xuanlocnguyen7563]

Wow!!! thanks pro. Easy to understand

[@SushilKumar-ic1kv]

Osm sir simple method i will understand...

[@GreatStackDev]

Thanks Sushil bro

[@zaighamabbas5667]

Great work bro

[@webdevelopement6887]

Bro you are amazing

[@mulualemdarimo2850]

Great video ! thanks and keep it up

[@appletech2088]

Very usefull for beginners

[@GreatStackDev]

Thanks a lot

[@josephdanquah3166]

awesome video....Thank you

[@certifiedolaitan5848]

Thank You ❤

[@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.

[@onlineteacher4295]

Thanks for the toturial

[@mostafatagmouti338]

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

[@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?

[@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

[@speedykiller619]

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

[@softmerit25]

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

[@markchristophercatapia2823]

Great tutorial, keep it up bro

[@chadrackkyungu2167]

very easy to understand thank sir

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

You use var and getElementById in javascript in 2020?

[@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

[@shraddhakumavat1973]

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

[@MakeJokeTo]

Sir isko responseiv kaise banaye please help

[@kavyapokharel4714]

Nice video

[@GreatStackDev]

Thanks Kavya

[@BytesBard]

Sir please continue Java course.

[@shantajha1373]

Awesome 👍

[@GreatStackDev]

Thanks 🤗

[@heybambang67]

Thank you

[@GreatStackDev]

Thanks for comment

[@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

[@Ahmed_R0]

You only front end developer???🌹

[@rahuljha1713]

Please make a video on how to make online exam website

[@mdridoy9896]

nice bro

[@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.

[@budgetwithjai2669]

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

[@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?

[@mrmoniindbank4827]

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

[@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

[@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

[@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..

[@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

[@anishavlogs7049]

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

[@malikahamed9587]

How I change it as a responsive?

[@daljeetkaur-fv7fv]

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

[@matjulius]

How do you do the image slider at the background

[@youssradebbali7726]

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

[@eustaciegold5924]

cool

[@jubairjubu4411]

can I have this source code ?

[@romuloalves9349]

Ótimo vídeo parabéns 👍.

[@rachitsoni8822]

Please tell me where to download those icons 🙃

[@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.

[@sugathsuranjeewa]

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

[@KaranYadav-qp2oo]

codekky.blogspot.com/?m=1

[@jadhavpravalika423]

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

[@antorroy5881]

Can you please give us the link of logo and image

[@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.

[@steveotieno8441]

you cool bro

[@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

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

But thank you so much

[@qwertyasd3228]

bhai icon kase bnaya link to do

[@PiranhaGaming01]

are not shown in my website

[@bakhodirbadalov6713]

how can i get the source?

[@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); }

[@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

[@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

[@pollorencecanja9759]

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

[@GreatStackDev]

1920x1080

[@noback1290]

omg👍🏻 thanks a lot🥹

[@GreatStackDev]

You're welcome!

[@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 .

[@ideareality9089]

how to get soucre code

[@santhosh_0400]

Pls do postal system in php plz

[@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

[@Octopiclntensions]

how do i access the source code, ???

[@saggysshorts]

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

[@GreatStackDev]

use image of 1920x1080 dimension

[@DabeerDA]

icons k link dy dou

[@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

[@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

[@durgalalrana1317]

Sir can I get your code

[@youcefboutiche9496]

can you write the codes please

[@sanimsanim2014]

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

[@GreatStackDev]

You can find my Instagram link in description.

[@asgalib7782]

hi

[@hardevsinghbijarniyahardev3755]

Give the source code of HTML and CSS file 🙏

[@rajumamidi8759]

Size of images

[@GreatStackDev]

always use 1920x1080 for full screen images

[@farheenfarooq1749]

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

[@henrymuhindi1858]

Topfun🗯

[@Heartless0RD]

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