Simple Images Slider Show - Css Animation Tutorial only using html and css

DarkCode in Facebook
/ darkcode0
Paypal Donation Link
paypal.me/YBen...
tags
Simple Images Slider Show
slider show with html and css
slider show without jQuery
Music
Nom : Spektrem - Shine [NCS Release]
Link : • Spektrem - Shine | Pro...
Follow Jesse Warren (Spektrem):
/ originaljw
/ originaljw
/ originaljessew
original...

[@avinashmurmu9070]

what!!! ...... that was so cool .... never thought of that, always used to do it by using javascript.

[@gauravshrivastav2518]

I have no word only three minutes, I will impress my boss for this effect show after ### good job brother

[@ALee-br3yc]

i usually dont leave this kind of message but.. you are awesome! THank you so much!!

[@aoikei3692]

i've watched tons of complicated ones yet this three minutes video helped. thank you so much

[@abbasali6262]

You give us real video for me u are like a very good teacher thanks for your help sir

[@YoYo-eg6rc]

I am looking for these types of small project, then I found your channel.
You are doing great work. keep doing... Your tutorials are really helpful for us 👌👌👌👌👌
If possible little bit describe tags in descriptions of video

[@uimonk]

th-cam.com/channels/cxj-9eO2bctooCB6qn1nvw.htmlfeatured?disable_polymer=true

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@nikkyujoshi]

even so cool after 6 years of upload 😀

[@payal_06]

Thanks you so much you don't have idea how much i needed it .... ❤️

[@iansawala9385]

insane broo...love your stuff and the music as well

[@gammerpro249]

I m looking for these types of projects thankyou

[@dunndexterlahaylahay6622]

Thank you so much! It helped me a lot. You deserve more views, likes, and subscribers.

[@NewAeon]

Absolutely loved this tutorial! Simple, elegant, easy to style! Many thanks :)

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@MasalaMan]

Oldie but Goldie. Fantastic, super simple, to the point. Great.

[@ilhamalam1322]

Never thought of that... seriously keep doing great stuff...

[@parker_n9]

Thank you so much. You saved my day sir! I'll keep on supporting your videos. One more time thank you!

[@eie2118]

I like the backsong

[@hazqier]

How do you make that transition? Mine just keeps changing instantly and my eyes hurt watching them.

[@CutieMoli]

opacity, transition 2s

[@Anni92092]

This is a great video and life saver, can we please have a part 2 that deals with debugging issues? For example, images not displaying properly like size or repeated.

[@matrix3596]

you cant say a single word but explainled it soo well ....

[@fabiolabrascia6001]

your videos are literally making my school semester end easier!

[@Ninjhaw]

fantastic .. ! its just a minute for me to learn .. Good Job sir ! (Y)

[@DarkCodeOnline]

thank you bro ♥♥

[@sarafathabib]

2:41 shake when change photo first time.......thanks a lot 😍
Almost 100k💥💥💥I'm one of them.

[@xctnjg4866]

Can you please make a video for making slideshow on html with preview next, slideshow and stop button?

[@cheveux9718]

so simple yet so pretty ! thank you

[@dara1753]

Awesome slider, thank you Dark Code. God bless you.

[@MattStantonOfficial]

I find that the images are stretching from one to another when they transition. Is it possible so they can just fade from one to another? Or is it because the width and height are different in each image?

[@raphaelzhao5005]

same problem

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@Sodjeagency]

Thanks, that is so direct.

[@brandimurray7620]

I truly don't understand how the fade transition to the next picture automatically started working, when I tried to implement this, the transition to the next photo is very abrupt and noticable

[@nikhildaiya]

Will this all work in notepad?
Plzzz reply bro

[@cutthecamerasdeadass--893]

what css is this??Mine is css3 with html 5 and it didn't change :(

[@charlotte.upandaway]

Thank you for making something I thought was going to be super difficult, so simple! Awesome vid.

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@Priya-xe8xp]

Toooo........goooooooooood darkcode it's really helpful for me and the music was tooo relaxing..😁😁😁😀😀😀😀😀😀😀

[@maithil11]

can't agree this used to be that easy

[@rihanchowdhury3300]

you guys are really awesome...pls pls keep making this kind of unique design... its really helpful

[@uimonk]

th-cam.com/channels/cxj-9eO2bctooCB6qn1nvw.htmlfeatured?disable_polymer=true

[@juancarlosbodoque4579]

Exactly what i was looking for! Thank you so much.

[@doschplay8917]

great work

[@firstbloodfangy6933]

Perfect simple solution!

[@AmitSingh-zr5tg]

man... that was awesome , i was always using pixels to do that

[@laxmanjonchhen7041]

You are true inspiration for me.Great videos by you . Please upload more videos and thanks for the content.

[@alltypevideos5150]

Fantastic sr yeah effect lgaker website attractive bn jati h thanks.....

[@need_more_coffee8487]

Thank God it's short, my other codes r already long enough to write another long code. Thank u so much, u helped me alot. Hope u get more subscribers 👍

[@GodsAutobiography]

Daaaamn, that's a clever solution.
Not quite what I'm looking for as my end-result, but this is a solid placeholder for now and definitely something I will utilize in the future. Many thanks!

[@braham.prakash]

Man you are genius

[@singhvaisikindra7173]

lots of love thanks for helping
sir

[@sagarrana9429]

I am speechless this much work in only 3 minute quite amazing,very well done ❤️❤️❤️

[@g.frederickwessehjr.477]

Thanks a lot. You have made my day.

[@amosstephen6472]

Dark Code, thank you very much. I really appreciate.
I followed this tutorial to create a slideshow but the image are repeated in small sizes.
Please what's the solution

[@victoriabadrajan6349]

mine are repeating as well , did you find the solution to make them right ? Thank You

[@braintechtamil1188]

Wow man it was so simplified
I really impressed
Good job man

[@shaheersspredzzy5146]

man love your vids

[@bakr]

Your Videos are very helpful.
Thanks for your hardwork.❤❤❤❤
BTW which screen recorder do you use?

[@DarkCodeOnline]

camtasia

[@mohamedmahadfarah4057]

Thank you Man you saved my Time

[@Ithinktoons0351]

Big Help Brother, Thanks.

[@paragaggarwal2050]

Thanks 😊 bro

[@GMAHESH290]

Image and text shoud placed adjacent to each other share a div by 50%, when i hover on text, it should occupy div, & when i hover on image, image should occupy div. How to do that using html, css? Plz answer.. I'm new to html, css

[@vijaya6282]

I seen many tutorial. .. but this is super cool. .. tricks it's booooooommmm thanks lot

[@XYZ-is4ee]

Thank you so much 💗💗💗

[@jordimuntadagomez816]

Lots lots and lots of thanks!!! :-) It came up into my life at the right time. Amazing help!

[@phyrom6438]

3 year ago, useful and sort.

[@liamaiken1782]

brilliant

[@redmia-pt1jb]

for example
my picter"s standart pixel is 40 px 40px.
how can i can do like that with my picture?
how can i make my picture size?

[@kunalparihar4496]

your videos are so straight forward and helpful,keep posting more!!

[@DarkCodeOnline]

Thank you bro for your Supporting ♥♥♥

[@uq0de]

thank you you helped me a lot

[@louie2114]

Hi DarkCode. Thank you for this codes. Got some bumps though. It works well with Chrome exactly how you showed it above. However, in Firefox, the transition seems abrupt (not as graceful as in Chrome), and in IE, it is not working totally (there is no transition at all and shows only the first photo. If you can please provide further tips. Thank you heaps.

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@programmingdojo5855]

Thank you for easy teach 🤩🥳🥳🥳🖤🖤💜💜💜💜💜💜💜💜💃🏻😍☺️

[@FarhanAli-to3ku]

Great video on simply with HTML and CSS....make more videos on websites development as it is trending among students everywhere...

[@udyogtagroupbusiness5978]

Thanks for this tutorials.

[@JohnC_87]

Thanks for sharing. It's so useful!

[@edwinosei2764]

Lovely tutorial i reconmmend this for whereone

[@davigs7218]

Thank you good sir for doing this in the most simplest way possible. You've earned a subscriber

[@8DWaveWorld]

th-cam.com/video/y2ZZQuOq_EQ/w-d-xo.htmlsi=5S7odWPE26y_VWxg

[@angelsmodiadie1626]

Thank you so much

[@kingsjgaming2662]

Big fan sir . that was too good and helpful

[@trick4freeu528]

what a nice a slider!!! awesome bro

[@DarkCodeOnline]

thank you

[@louie2114]

thank you for this tips...

[@PrimeStarOfficial07]

Thank you sooo much😍😍😍

[@buntimedia2408]

Really super... I spent too much time on JavaScript... But it's looking cool and nive

[@thecoderraj3777]

Thanks a lot sir 😊🙏🙏🙂

[@sandro5506]

god bless this person

[@cannguyen9044]

I even never thought about that.

[@samsar7]

Thanks ! The video was helpful!

[@DarkCodeOnline]

thank you ♥♥

[@anonymoususer8111]

superb\
epic idea

[@NixTheG0at]

Hi great work, i just notice one thing, if the whole animation ends, the second start of animation is so quick , is there a way to slow it down when it starts again showing pictures. tnx

[@Deshibarta24]

Unbelievable it's very Easy I subscribe you

[@umuanas9666]

Wow this is very amazing thank you sir

[@bosscoding3999]

it was cool thanks

[@blackshadow323]

The pictures are too big. how can I reduce this one sees everything in the animation and not just cut one out

[@haraldsigvartsen1696]

feelya

[@haraldsigvartsen1696]

@keyframes slide{
25%{
background:url(images/Spiderman2.jpg);
background-size: contain;
}
50%{
background:url(images/Spiderman1.jpg);
background-size: cover;
}
}

[@haraldsigvartsen1696]

found the answer how to fix it.

[@uncrownedking3272]

@@haraldsigvartsen1696 Dude you're awesome, thanks!!

[@SanthoshNayakYt]

@@haraldsigvartsen1696 how to make it responsive?

[@eastern815]

thank you for sharing

[@ajinkyakedia5046]

Srry but I got some issue my animation is not working properly please guide me

[@sumittrivedi4077]

Thank u so much for this video
It's amazing 😘

[@asha_paswan]

Your. Vidoes. Are. Very. Very. Helpfull.
I just. Want thanks. U alot. 😊

[@uimonk]

th-cam.com/channels/cxj-9eO2bctooCB6qn1nvw.htmlfeatured?disable_polymer=true

[@md.palash6675]

wow,,,,,,
its really helpful tutorial brother...............

[@akinkugbenene9209]

Dark code you are my hero. ❤️

[@DarkCodeOnline]

thank you

[@Mapper720]

Doesn't work in Firefox.

[@irvinalexisvalenciayanes7373]

You are awesome, thanks a lot!

[@rashedobeidat5150]

Thank you, this is great

[@ObliviousGamingTeam]

it shows like 12 pictures of the same thing, how do i make it one picture like yours cant figure it out??

[@James-io5nz]

add background-size:cover; in each keyframe

[@morganbarber5376]

Is there a way to remove the flicker between images?

[@TheRealSolar]

get rid of the background image the .slider one

[@piereligiodisante]

Can it be done with images from the server? I mean, with templating engines

[@MohamedJakkariyaRBE]

awsome i realy love it

[@oranxd5616]

Thank you bro！

[@sahanasm5535]

Thank you