Auto Image Slideshow using HTML and CSS
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- *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.co...
Source Code Only : tutorials-ware...
------------------------------------------------------
• 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: creativecommon...
------ -------- --------- --------- -------- ---------
Video Created By: R.Y Baskara
![ฮักเทื่อสุดท้าย - บอย ศิริชัย [OFFICIAL MV]](http://i.ytimg.com/vi/-1PoPoQ-B-k/mqdefault.jpg)
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 need help bro
For example if i want to add 5 images?
so i must change all the percent into -1200 or minus -1200 to the all percent
very helpful, thank you
Where is the slide animation percentage?
@@manthan7535 3:48 in video :)
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
Error:Also define the standard property 'animation-iteration-count' for compatibilitycss(vendorPrefix).What to do?
me too
dont working my -webkit-animation is underline and its not working. No animation , only show photo
Same here , I did same like that . I don’t know where is error. Please help us @admin.
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;
}
@@talhasiddiqui4780 You are a legend mate, this is the only solution that works in 2022!
@@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.
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
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
how adjust the scale or size of the images
I needed it , that's why I am here. thanks!!
Hi Sir, Slider cmd is not showing in my vs code, Pls help
Wat is @webkit-keyframes?
Really it works 100%,
you are amazing...
its not even working. look in the video there is dark green underline at -webkit-keyframes and at .slide-images. isn't that error?
Doesn't work it only shows pics
Webkit keyframes is yellow its not working
Can you help me?
Why do my other photos won't show up?
What is wrong with the link to your source code. It's just an add
My Virus Checker blocked it as Malware. Check your machine for viruses.......!!!!!!!
Not working properly
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?
set Z-index valve to 999 for menu bar in css
@@maxdifficulty8109 Thanks!
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
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
My images kept stacking ontop each other. it only worked when i set the display of the slide-container to flex.
okay how do i link the photo with my own? every time i try it does not work
I'm working with codepen. Do I need some kind of library?
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...
@webkit-keyframe is doing what, and what must i use same
There is no slideshow showing on mine only the images..may I know if how to fix it?
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
We suggest you put the images in the same widths and heights
Thanks it worked 🤲🏾💥but how can I align it with all the other content on the page ?!!
It works but caught error using webkit what to do
your video caught my eyes!!!!
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.
thaks boss
Thank you so much this was sooooo helpful
Great video but it really needs some more explanation
How to change the images to slide to right side what line have to change in that coding????
Please add the codes in description
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?
Use images that are at least 1200 px wide
Great job
I used this code. I have more than 50 images, but only 5 images showing..what can i do ?
Will you please help me means what all application we required to download in our laptop
Please help
@@ramkrushnhari9233 stfu
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
Not understanding what is happening
How to add videos instead of images in the same concept??
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.
hello there, thanks for visiting our channel. we are working on upcoming youtube projects. thank you for supporting our channel!! 👍
I will keep supporting thank you.
@@CodeInstinct gvhfg
This comment made me subscribe this channel
My images aren't loading how to fix?
nicely done, thank you
is this working in 2022? Images don't move.
Nice! :D
can the pictures linked to a website? href?
can I do this with text?
My images aren't loading
No longer works in 2022. I followed this tutorial verbatim, but my photos stay still
Eh?!
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.
:)
can you give source code
Bro it's not working
it's not working
How i Can add toi Blocher?
Your video are great, thank you.
whch application are used in this video
VS Code
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?
Or you can adjust the width.
And do overflow attribute in CSS
And Margin
can i get the source code..?
What would the code be if I needed to hyperlink the images?
this provide link for the image
It didn't work for me at all
Thanks bro
Your Vs theme name?
It goes way to fast to type side by side.
Is it responsive..
what is webkit ? How to download it?please give me a link
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;
}
Source code?
Thanks
source code?
it didnt work for me. do i need any Source code like webkit keyframes etc?
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;
}
@@talhasiddiqui4780 lol thx for replying amd helping but I don't even know if I am gonna use this now 😅 but thx anyway 😀
@@MontyEditz 😁😁😅😅
Great very helpful bro🤘👑
hi, how can you make it responsive?
Did you get it? Maybe?
I don't check it, can you help me out if you have it?
Tnx
I'm having some difficulties here
What code editor are you using?
Its Visual Studio Code
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.
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.
use js
please provide source code also
why isn't it working, the images arent popping up and the css works fine.
and when i remove the css the images pop up
@@distra_oce1360 hey, how may I help?
float does't working
exaplain more
can you please tell how to resize it such that the length occupies whole screen
Use the width, height on css?
Use the width, height on css?
@@someoneees yup
how many images can we add to our slide show????????????????
Very helpful
the slide is too large, can;t even fit my website screen
well he's not going to do everything for you smh 😹
you have to apply your own logic
6:00
❤❤❤❤❤
😊
the background is repeating any way :'(
You can do background: no-repeat;
hey
you can do background:no-repeat;
How can I add more images in my slide ?
please answer this question , i have the same problem
i need an answer to this!!
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!
@@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!
@@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.