Auto Image Slideshow using HTML and CSS 

To add more pics to the slideshow, add +1200px width to .slide-images for every picture and change the slide_animation percentage values around so you have -1200 per image. pic nr 4 will be placed at -1200px and needs 4800 slide-images width and 5 will be placed at -2400px and needs 6000 slide-images width and so on! Good luck to all website creators!

I needed it , that's why I am here. thanks!!

amazing. You cant imagine how this helped me. Im learning CSS and HTML and i try to build a project with image slider, but i know nothing about javascript.. and showing that you can do this with animation CSS is just amazing.! great! thank you. I will copy your code to my reference folder and it will live there forever! Thanks P.s. great song

Really it works 100%, you are amazing...

My pixs is showing but my slide show ain't working i.e its not moving at all just the first picture showing in the background

Hello, how to build this effect at time 0:03, where the line runs from right to left and then becomes a vertical line showing the logo

nicely done, thank you

Great job

Thank you so much this was sooooo helpful

I'm working with codepen. Do I need some kind of library?

@webkit-keyframe is doing what, and what must i use same

Wat is @webkit-keyframes?

how adjust the scale or size of the images

Your video are great, thank you.

How to change the images to slide to right side what line have to change in that coding????

Thanks it worked 🤲🏾💥but how can I align it with all the other content on the page ?!!

Can you help me? Why do my other photos won't show up?

Hi Sir, Slider cmd is not showing in my vs code, Pls help

Nice! :D

bro there is any rue all image must be same width and height ? when i try with different h X w images its working sliding but i cant view image perfectly

My images kept stacking ontop each other. it only worked when i set the display of the slide-container to flex.

And how a make it responsive? With a tool ore something? I used bootstrap and it's still not working? Does anyone know what the solution is? Tahts will be great. :)

Thanks bro

Error:Also define the standard property 'animation-iteration-count' for compatibilitycss(vendorPrefix).What to do?

Not working I used 3 images and all the codes but it. Show only 1 img and it not sliding it is going up and down on scroll and also get over through my freeze header

your video caught my eyes!!!!

There is no slideshow showing on mine only the images..may I know if how to fix it?

Great very helpful bro🤘👑

okay how do i link the photo with my own? every time i try it does not work

thaks boss

I made it same as you but I dont't see results: I tried on Chrome, brave ... I see only changed background. Ikd why it dosen't work.

Ive really enjoy watch you videos. Glad you’re back. I was wondering if I could possibly become a student of you and learn. If you’re free.

Hi, friend, yes, it is an add... Probably, if you publish your code as zip file it may be more safe.. hope to hear your response...

How to add videos instead of images in the same concept??

Thanks

can the pictures linked to a website? href?

Tnx

Can you do this without having to declare each image in the code? I've been looking for a way to do something like this, but have the code point to a folder/directory where I store all my images, and all I have to do is load the folder with all the images I want to display. At the same time, I want the image to be scaled up or down automatically to fill the entire browser window, even if the user stretches or re-sizes the window. I've been looking for a way to set this up so that I can have this serve as an 'intermission' screen in OBS, whenever I stream myself playing a game. As I play the game, I would take screenshots of my game...... and I was hoping to be able to dynamically feed those images into the background of my page (hosted locally) to serve as background images with a blur applied to them, whenever the code progresses to each consecutive image. The foreground I currently have is just a large form/text box that will allow me to either type out my commentary, or just a way for me to indicate to my viewers that I'm AFK. I even have a pure CSS timer, below that box to show exactly how long I've been away.

its not even working. look in the video there is dark green underline at -webkit-keyframes and at .slide-images. isn't that error?

My images aren't loading how to fix?

Hey! I'm trying to implement it to my website. However, a problem is arising. When i scroll the page, the slideshow of images is going over my menu bar. Can you please tell me how to fix it?

❤❤❤❤❤

hello, i used 6 images and only 3 appear in the animation. Also the slideshow is kinda to the right so there is an horizontal scroll bar. Do I have to use smaller images?

dont working my -webkit-animation is underline and its not working. No animation , only show photo

It works but caught error using webkit what to do

What code editor are you using?

Is it responsive..

Webkit keyframes is yellow its not working

How i Can add toi Blocher?

can I do this with text?

What would the code be if I needed to hyperlink the images?

Please add the codes in description

Great video but it really needs some more explanation

is this working in 2022? Images don't move.

Very helpful

Doesn't work it only shows pics

can you please tell how to resize it such that the length occupies whole screen

😊

only thing that bothers me is that the images when sliding they don't go together, theres a gap between images, anyone knows how to fix?

I used this code. I have more than 50 images, but only 5 images showing..what can i do ?

My images aren't loading

What is wrong with the link to your source code. It's just an add

hi, how can you make it responsive?

it didnt work for me. do i need any Source code like webkit keyframes etc?

what is webkit ? How to download it?please give me a link

Your Vs theme name?

can i get the source code..?

can you give source code

please provide source code also

source code?

Source code?

6:00

It goes way to fast to type side by side.

No longer works in 2022. I followed this tutorial verbatim, but my photos stay still

Bro it's not working

It didn't work for me at all

it's not working

I'm having some difficulties here

float does't working

how many images can we add to our slide show????????????????

why isn't it working, the images arent popping up and the css works fine.

the background is repeating any way :'(

the slide is too large, can;t even fit my website screen

How can I add more images in my slide ?