Auto Image Slideshow | HTML & CSS Tutorial | With Source Code 

tip if you want an even better transition to the first image, add a fourth image that is the same as the first one and do 100%{ transform: translateX(-300%); } so it really looks like an infinite slideshow

Thx this was a huge help✊

@@Neoproxy_ I tried this, but it still moves in the opposite direction after reaching the last image. Is there any way for this to slide in the same direction forever?

Nobody cares

So!

Prolly coz it's without javascript

Hi, did you manage to get it working with 8 images? I'm having the same problem

@@olivernorgrove_hello do you have got still that problem ??

@@olivernorgrove_ @keyframes slide{ 0%{ transform: translateX(0); } 6.25%{ transform: translateX(0); } 12.5%{ transform: translateX(-100%); } 18.75%{ transform: translateX(-100%); } 25%{ transform: translateX(-200%); } 31.25%{ transform: translateX(-200%); } 37.5%{ transform: translateX(-300%); } 43.75%{ transform: translateX(-300%); } 50%{ transform: translateX(-400%); } 56.25%{ transform: translateX(-400%); } 62.5%{ transform: translateX(-500%); } 68.75%{ transform: translateX(-500%); } 75%{ transform: translateX(-600%); } 81.25%{ transform: translateX(-600%); } 87.5%{ transform: translateX(-700%); } 93.75%{ transform: translateX(-700%); } (this should work give it a try)

Glad you liked it!

It is working now...Had to make suitable changes to my image height and width

That's a great video idea. Will create something on that soon.

@@CodingArtist thnx sis

@@Noobgamer-qe4gv what is going on ? who is sister are you a girl

@@faizanalso yes coding artist is a girl

@@Noobgamer-qe4gv ok mam

Yes if u insert an extra one can

​@@JasonBernard-f6uplease tel me how to put more then 4 images? Please help me

you have to reduce the keyframe values. like this. 0% { transform: translateX(0); } 25% { transform: translateX(0); } 50% { transform: translateX(-100%); } 75% { transform: translateX(-200%); } 100% { transform: translateX(-200%); }

i hope it works

@@kashifniaz4627thank you, i will try this soluition

​@@kashifniaz4627what about adding more images

@NblezSapz thanks! I will search for it

Thanks

Thanks