ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- ➢Tutorial Files: m.w3newbie.com...
➢Courses: w3newbie.com/c...
➢Website Resources: w3newbie.com/r...
Create A Responsive Image Slider - HTML5/CSS3 with No JavaScript
Popular Pure CSS Responsive Image Slider Tutorial:
• Pure CSS Responsive Im...
![The Wall Song ร้องข้ามกำแพง | EP.213 | กรีน อัษฎาพร | 3 ต.ค. 67 [1/5]](http://i.ytimg.com/vi/3KrlLbCsadI/mqdefault.jpg)
thank you so much brother. I watched more than 10 different videos just to learn how to add image slider in website, and here I find the best solution.
this is the best tutorial i ever seen so far from youtube about slideshows
Me also
Have you tried this in your pc
@@ramkrushnhari9233 yeah it worked
What all software we required for this slideshow in our pc
@@ramkrushnhari9233 you need a text editor or a ide to write the code. I used webstorm by jetbrains or you can use simple text editor like atom. Thats all u need. Once you write the code, save it and open with the browser. very easy.
Like everyone else says - This really is, the best Slider video. I watched a lot of them So simple. Thank you so much
Best tutorial I've ever seen. It works perfectly. Thank you!
Because of you i made my first slider ever
Thanks so much......
Best tutorial I've ever seen without a doubt OG 🔥🔥🔥
This is a very good explanation. Thank you very much!
Thank you, I adore your ability to simplify it
Well done 👍
... how does one add more than just four images and what percentages would have to change?
that's really awesome, keep going with this nice short tutorials..
this is fantastic, but i was wondering how to change the size of the images on screen?
The tutorial I've been looking for, thx 😊
Can we add more image?
how do you change the size, its too big for me
thank you very much. It really works.
It works perfectly. Thank you!!
thank you so much the best tutorial I've ever seen.
This video is very useful! Thank you!
OMFG!!! THANK YOU SOOOO MUCH!!!! I"ve watched multiple videos just to find out how to make a slide show and only yours worked for me Thank you thank you so much! I've been figuring how to do this for 3 days 🤧
I'm still new to this 😅
thank you so much.. this is the best image slider tutorial.
Simpler than what my teacher taught in class
Bro , thanks it works 100% with me . I will subscribe because this .
Amazing tutorial this helped me so much 😊
Helped me a lot! Thanks a lot
could you, please, explain the negative percentage in @keyframes? Thank you!
i love your video, thank u so much i really need this tutorial :3
How to make the pictures size to a cover set?
Thank You Verry Much Sir !!
It Works !!
how to change the size of the image?
Great Video! Thanks~
you're amazing
Is there any way to do a smaller version of this?
Change width
Thanks it really worked out
thank you
Very helpful thank you for this video
Thank you very much it helped me alott
I find tis video very informative and well presented. New subscriber over here. Thanks for the great info.
I'm doing this, but the images are not that size, they are a lot smaller. How do I change this?
I would like to know that to!!
Thank you!
Thank u dr
Super helpful 👍
Thank you so much for this
can we reduce image size? and further how to adjust different size images in one slider.
thanx
yeah if op sees this i bet there's other who would like to see this answered. it's a hassle trying to get in the right images, let alone trying to get the figure itself to resize to a smaller box without f-ing up the ratios set for the images according to their amount and slide time
Thanks so much from Lisbon :)
CAN WE ADD MORE IMAGE?
Thank you so mutch
Amazing Sir It's Really Good
Thank You Sir
We're you able to get the code to work?
So very very very much thanks broooooooo
i download this video to learn
Very. Nice
Is there a way to write the code, so that it shows any image inside the folder, without having to type the full name of the image?
Well Done!. I am using this slider on my website.
That was amazing
it's not working at my end
thank you for your help😊😊😊😊😊😊
i’m trying to do 4 images
God bless you but how do I size the slideshow onto ananother page
Thank you so much.
What's the difference between styling #slider and styling #slider figure. Aren't they both going to style the same thing? (i.e. all the images)
added jpeg images then changed it to png images when it didnt show up on my site...Double checked my code and I did everything correctly. I wonder why its not working.
Nice video 🔥
why it's not working I
did exactly what he did
just the image that shows not the slider
I don´t know how to embed this slider into a WordPress page!!
thank you so much
i bet there's other who would like to see this answered. it's a hassle trying to get in the right images, let alone trying to get the figure itself to resize to a smaller box without f-ing up the ratios set for the images according to their amount and slide time
hi, thanks for the tutorial.
What i must change, when i have only 3 jpg for the slider to show correctly?
Thank you :)
Hello, you need to change the number of keyframe transitions and the percentages. I don't have the tutorial code in front of me.. but I believe it was a 5% gap for each unique slide making the transition.
It work thanks 😘
animation doesn't work with Firefox? Copied exactly like you but no movement at all
Hey just checked Firefox, Chrome, Safari, and it's working fine for me. Check the completed files in the description.
Try using -webkit
SUPERRRR
bro thank u soo much
all of my website desapear when I put the slider because of the witdh 500%
why my picture doesn't appear
How do you do more than 5 images?
can i have the code sir
whats the resolution of the image that you use?
doesn't work on VScode
not the clear explanation for beginners
google "codekky blog" for better explanation and tutorial
all of my images (5) are sliding off screen to the left for a while then then slide back onto the screen. What am I doing wrong? I have used images using link address from a website instead of saved images from a file, could this be causing it?
Will you please help me
Means what software we required to do slideshow like this
Too restrictive....can't code for varying numbers of slides, i.e. too many %s.
keyframes slider error
Is this responsive?
excellent video !! Would you like to know the name of this sublime text theme?
It not work
Why💔💔
What if we got 5 images how the keyframes percentages will be pls someone reply
it depends on the percentage the width of your image takes...for example his was 20%
Subscribed
AND HOW DID YOU DECIDE 20, 50, 75, 90, WAHTEVER % WHEN MOVING AHEAD?
That's how you control how fast the image is going to change from image to another image, if you want an exact calculation then here you go..
For example, we want a total of 10 second animation, but want to allocate a total of 1 second transition change from image to another image, and we have 5 images, the calculation would be..
9/4 = 2.25, we now know that we have 2.25 second to see every image before the transition takes effect, You might ask, if we have 5 images, why 9/4 ?, it's because the final image and the first image is the same, and the animation-iteration-count is infinite, so it will loop anyways,
now to get the animation transition speed, we will divide 1 by 4, 1/4 = 0.25,
Now let's convert them to percentage so that we can use them to keyframes
2.25 second / 10 * 100 = 22.5%,
and for animation transition speed: 0.25/10 *100 = 2.5%;
now we can construct our keyframes
@keyframes slide{
0%{
left: 0;
}
22.5%{
left: 0;
}
/*0 to 2.5 second (which is 22.5 in percentage) we want to stop the animation to see image1*/
25%{
left: -100%;
}
/*then, we add the transition speed here, which is 0.25 second (which is 2.5%) so we should add 22.5% + 2.5% = 25%*/
/*NOTE: Same explanation Apply to the rest of the animation here for the total of 0% - 100% */
47.5%{
left: -100%;
}
50%{
left: -200%;
}
72.5%{
left: -200%;
}
75%{
left: -300%;
}
97.5%{
left: -300%;
}
100%{
left: -400%;
}
}
Here is the project file for this, with explanation.
codepen.io/anon/pen/qLdwxr?editors=0100
@@richardramos7267 May you and your family lives a long and happy life.
@@richardramos7267 bro do you know how to minimize the size of the image? i want it to fit inside the container i made
Sir I'd will use in onetime
Does it matter of the size of the image you're using? Or do it have to be a specific size to work.
it seems so every slider i do i can get it to move but the sizes are not right. i get this issue no matter whoes video i watch on sliders
thank for tutorial but i don't like this kind of slide
2:23
WHAT WAS THE POINT IN GOING BACKWARDS ON EACH ONE?? YOU LOST ME
Because if you put a positive number instead of negative, then your left point perspective is going to move to right, while negative number, will move from left to negative left, which will reveal the other images that are on the right position.
Here is an example illustration.
As you can see, the screen area/visible area only see the img1.
[SCREEN AREA.]
[SCREEN AREA.]
Now let's move 100% from left to left, which is negative 100%;
[SCREEN AREA.]
now img2 is visible
[SCREEN AREA.]
now move -200%;
[SCREEN AREA.]
now img3 is visible
[SCREEN AREA.]
now move -300%;
[SCREEN AREA.]
now img4 is visible
[SCREEN AREA.]
now move -400%;
[SCREEN AREA.]
now img5 is visible
[SCREEN AREA.]
When you teach something, you must have some logics. We are beginners. We copied your html and css. You gave us an example of so big image and we don't know how to amend it smaller to fit our website. sigh... It's really headache. Failed. I cannot even do a simple carousel. The slider is too fast and it will make my customers giddy and they definitely won't buy anything from me if I used your slider example. Image too big and sliding too fast and no clicking of pausing image.
Please see my Bootstrap slider video as it is easier to have controls.
Thank you so much for this video it's great
Thank you
Thanks!