Auto Image Slideshow using HTML and CSS

*Source Code is In the Description!
This video is about how to create auto image slider ( image slideshow ) using only html and css
*Full Project : www.patreon.com/posts/auto-im...
Source Code Only : tutorials-warehouse.blogspot....
------------------------------------------------------
• Visit Our Social Media:
- Instagram : / codeinstinctofficial
- Facebook (New): / code-instinct-10845813...
----- -------- ------- -------- -------- ------- -------
- Code Editor: Visual Studio Code
- Recorded with : NVIDIA Shadowplay
----- -------- ------- -------- -------- ------- -------
• Music Info:
Music: Gravity by extenz
/ extenz
Video Link: • Video
License: creativecommons.org/licenses/...
------ -------- --------- --------- -------- ---------
Video Created By: R.Y Baskara

[@Vichion]

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!

[@Miguel-ey2uv]

I need help bro For example if i want to add 5 images?

[@nocrune3190]

so i must change all the percent into -1200 or minus -1200 to the all percent

[@nohael-hindy8972]

very helpful, thank you

[@manthan7535]

Where is the slide animation percentage?

[@Vichion]

@@manthan7535 3:48 in video :)

[@asifhossain2088]

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

[@harshitsachan5161]

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

[@user-gk6zj1kh1r]

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

[@ted2091]

nicely done, thank you

[@ronnie_alexx]

Great job

[@MinecraftAchievers]

Thank you so much this was sooooo helpful

[@kiaranicki2345]

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

[@repalda4736]

your video caught my eyes!!!!

[@aboutthebook5275]

Your video are great, thank you.

[@vikinikam7899]

whch application are used in this video

[@nosoyjolvi437]

Nice! :D

[@PasinduMadhumal]

Thanks bro

[@NiltonOliv]

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

[@krulhelmi]

how adjust the scale or size of the images

[@PP-hy1rh]

Wat is @webkit-keyframes?

[@patriciodelacruziwadare8359]

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

[@daviddarko-mensah9297]

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

[@toufikahmed2892]

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

[@HardDharajiya]

Great very helpful bro🤘👑

[@bruhvoh2710]

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

[@MdSharifulhaq-ie2bv]

thaks boss

[@MrWilderness3432]

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

[@jaylerjackson]

Thanks

[@catalystpubg1367]

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

[@travellerg5834]

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

[@jessicakorubo2807]

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

[@rommeljohnsevilla7535]

Tnx

[@monam1671]

Please add the codes in description

[@ImperfectTuber]

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

[@teretoryr6491]

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

[@tizygamer7688]

me too

[@trishcstr9266]

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

[@UltimateSKGamer]

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

[@alvinaprastika1193]

❤❤❤❤❤

[@umasaivigneshpeeta7890]

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

[@whitesky8013]

Webkit keyframes is yellow its not working

[@Tech_625]

It works but caught error using webkit what to do

[@wasimrajvlogs]

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

[@CodeInstinct]

We suggest you put the images in the same widths and heights

[@jerry9113]

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

[@kezangdorji1993]

Same here , I did same like that . I don’t know where is error. Please help us @admin.

[@talhasiddiqui4780]

Guys instead of webkits try this @keyframes slide_animation{ 0%{left: 0px;} 10%{left: 0px;} 20%{left: 1200px;} 30%{left: 1200px;} 40%{left: 2400px;} 50%{left: 2400px;} 60%{left: 1200px;} 70%{left: 1200px;} 80%{left: 0px;} 90%{left: 0px;} 100%{left: 0px;} } .slide-images{ width: 3600px; height: 800px; margin: 0 0 0 -2400px; position: relative; animation-name: slide_animation; animation-duration: 33s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-play-state: running; }

[@mimsmimsmims]

@@talhasiddiqui4780 You are a legend mate, this is the only solution that works in 2022!

[@boasmasso]

​@@talhasiddiqui4780 I am new on coding, can you please explain the theory behind this percentage and the pixels. I see 0 repeated many times. I really need to understand than I can do it myself. If someone could help... Thanks.

[@yasserbouthirit7778]

dont try to understand the pixel or pourcentages just try them yourself , see what fits and whats not it only takes time good luck@@boasmasso

[@tasiimdiliza]

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.

[@CodeInstinct]

hello there, thanks for visiting our channel. we are working on upcoming youtube projects. thank you for supporting our channel!! 👍

[@tasiimdiliza]

I will keep supporting thank you.

[@coofciise2663]

@@CodeInstinct gvhfg

[@parthparikh9624]

This comment made me subscribe this channel

[@roubinjamal4704]

How i Can add toi Blocher?

[@achillesadrianaban4196]

can the pictures linked to a website? href?

[@luca-qf5ni]

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. :)

[@cerracerra9710]

😊

[@user-kt5ut9ey8w]

My images aren't loading how to fix?

[@thewhite_crow]

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.

[@stevinprince8104]

Is it responsive..

[@randymarsh627]

can I do this with text?

[@jobedwardyakit9402]

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

[@josephshalangwa460]

Great video but it really needs some more explanation

[@arifhussain5276]

please provide source code also

[@rudraneelmandal4741]

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?

[@maxdifficulty8109]

set Z-index valve to 999 for menu bar in css

[@rudraneelmandal4741]

@@maxdifficulty8109 Thanks!

[@Durandd5]

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

[@Crazymcfeel]

Very helpful

[@mr.atharvchavan]

Not working properly

[@XbLMindGamez]

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

[@prakashkoppurapu]

this provide link for the image

[@D3athTrigger]

Doesn't work it only shows pics

[@ea3884]

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

[@richiesullivan9548]

My Virus Checker blocked it as Malware. Check your machine for viruses.......!!!!!!!

[@yashgupta7041]

can you give source code

[@adriancaballerosantos5875]

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?

[@djargen]

Use images that are at least 1200 px wide

[@user-kt5ut9ey8w]

My images aren't loading

[@princedestiny7546]

can i get the source code..?

[@anandrathod9180]

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

[@ramkrushnhari9233]

Will you please help me means what all application we required to download in our laptop

[@ramkrushnhari9233]

Please help

[@evan.5967]

@@ramkrushnhari9233 stfu

[@babysilkchicken4462]

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! from the pined comment

[@ryanmugz4644]

Not understanding what is happening

[@rommeltolete6304]

What code editor are you using?

[@xtremer6557]

Its Visual Studio Code

[@tenasialuberg2835]

hi, how can you make it responsive?

[@luca-qf5ni]

Did you get it? Maybe? I don't check it, can you help me out if you have it?

[@akhilshivnani7701]

Source code?

[@aarabhyarajan2389]

6:00

[@shivampuri6568]

Your Vs theme name?

[@bikrantjungbudhathoki3687]

source code?

[@nyblenproductions5166]

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?

[@evan.5967]

Or you can adjust the width.

[@evan.5967]

And do overflow attribute in CSS

[@evan.5967]

And Margin

[@rkmugen]

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.

[@FunkafiedBandit]

You're going to need to use either JavaScript or a framework like Bootstrap, Foundation or Bulma. Can't with just HTML and CSS unfortunately.

[@martinibomb]

use js

[@bowerbirdlab464]

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

[@someoneees]

Use the width, height on css?

[@someoneees]

Use the width, height on css?

[@023__yashchaudhary9]

@@someoneees yup

[@lcerdevelopment]

It goes way to fast to type side by side.

[@markstevenesteves9504]

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

[@talhasiddiqui4780]

instead of webkits try this @keyframes slide_animation{ 0%{left: 0px;} 10%{left: 0px;} 20%{left: 1200px;} 30%{left: 1200px;} 40%{left: 2400px;} 50%{left: 2400px;} 60%{left: 1200px;} 70%{left: 1200px;} 80%{left: 0px;} 90%{left: 0px;} 100%{left: 0px;} } .slide-images{ width: 3600px; height: 800px; margin: 0 0 0 -2400px; position: relative; animation-name: slide_animation; animation-duration: 33s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-play-state: running; }

[@jerrodgraham5970]

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

[@jgappy]

Eh?!

[@jonatanmsanchez]

It didn't work for me at all

[@QuranVerse_Channel7373]

Bro it's not working

[@MontyEditz]

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

[@talhasiddiqui4780]

instead of webkit try this @keyframes slide_animation{ 0%{left: 0px;} 10%{left: 0px;} 20%{left: 1200px;} 30%{left: 1200px;} 40%{left: 2400px;} 50%{left: 2400px;} 60%{left: 1200px;} 70%{left: 1200px;} 80%{left: 0px;} 90%{left: 0px;} 100%{left: 0px;} } .slide-images{ width: 3600px; height: 800px; margin: 0 0 0 -2400px; position: relative; animation-name: slide_animation; animation-duration: 33s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-play-state: running; }

[@MontyEditz]

@@talhasiddiqui4780 lol thx for replying amd helping but I don't even know if I am gonna use this now 😅 but thx anyway 😀

[@talhasiddiqui4780]

@@MontyEditz 😁😁😅😅

[@sajidakhan9866]

it's not working

[@verontetteh-nortey3616]

I'm having some difficulties here

[@sadiqBD]

float does't working

[@evan.5967]

exaplain more

[@distra_oce1360]

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

[@distra_oce1360]

and when i remove the css the images pop up

[@evan.5967]

@@distra_oce1360 hey, how may I help?

[@aminaamrouche3236]

the background is repeating any way :'(

[@zedzed1091]

You can do background: no-repeat;

[@evan.5967]

hey you can do background:no-repeat;

[@thosinduwijesuriya9790]

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

[@ChengZe]

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

[@evan.5967]

well he's not going to do everything for you smh 😹 you have to apply your own logic

[@judyannpunzalan7535]

How can I add more images in my slide ?

[@squareadventuretv6882]

please answer this question , i have the same problem

[@Vichion]

i need an answer to this!!

[@Vichion]

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!

[@Vichion]

@@squareadventuretv6882 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!

[@TheIntroFX]

@@Vichion What do you mean with the slide_animation percentages to -1200px. It runs from 0% to 100% with its respective pixel counts. So which ones do i change? I want to have a total of 5 images.