This is brilliant. I've spent the whole day trying various solutions in different videos and none of them are as simple and as easy to implement as this. Many many thanks.
Man You are just awesome 🙏 , this video just cleared my doubts and helped me a lot . I subscribed to your channel , I am sure you will make amazing content in the future
Thank you alot. This really helped me. I have been looking for a solution for some while now but none of them quite explained it as well as you did. Thank you
Change the timing of of the transform animation; the part that comes after the * in the translateX(calc...etc. I made mine a little longer and synced it so that the second cycle matched the 1st cycle of photos when it reset.
Kindly go to settings on UA-cam and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder
Kindly go to settings on UA-cam and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder
Hey The Mute Dev :) I really like this tutorial and wondered if it is possible to add one specific thing: to turn the pictures into links so u can click them and get to a nother website, but the rest stays the same?
La animación se vuelve brusca cuando termina y vuelve a empezar porque el navegador tiene que "saltar" de la posición final de la animación (translateX(-100%)) a la posición inicial (translateX(0)) de golpe. Una forma de suavizar esta transición es utilizando la función animation-direction y estableciendo su valor en alternate. De esta manera, la animación se invertirá cuando llegue al final y volverá a empezar en la dirección opuesta, lo que creará un efecto de "rebote" más suave: .slide-track { display: flex; width: calc(250px * 28); animation: 50s slides linear infinite alternate; } @keyframes slides { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } by: Blackboxai
It went too fast for me, do you have the html and css files I can get from maybe github? Also if you want to have right and left arrow buttons on the right and left so user can slide themselves along with the animation that would help.
You see the place he added overflow: hidden; don't put it and you should have what you're looking for. Or just add overflow X to the main div and see m
But i want first image exiting from left of the screen should enter from right side immediately while other images should still keep moving a they were doing.
This is brilliant. Any tips on what the code needs to look like if we want to create another slider just below this one? Tried giving the first and second sliders and id but no matter what I do, the second slider does not populate
Thanks for the video! My animation is not scrolling automatically, sjust stands still. In Chrome I used webkit for both animationa and @keyframes but still nothing. Anyone knows the answer?
I re typing your html code but it doesn't work, i barely using xampp but still doesn't work, i use vscode app i scan the error, nothing error notification
Excellent video. How do I assign this style only to the slider images, I added this code on my website and it keeps changing all the other images as well besides the ones on the slider. Doing as you did in a new file works, the problem is when you add the code to a site, where it contains several other images, this problem occurs. Can someone help me? Thanks
This is brilliant. I've spent the whole day trying various solutions in different videos and none of them are as simple and as easy to implement as this. Many many thanks.
lol same
Thank you so much, i was really looking for this and couldn't find any content on the topic seeming like a common feature.
I am searchig from 3 days and finally got it
Thanks bro
Man You are just awesome 🙏 , this video just cleared my doubts and helped me a lot .
I subscribed to your channel , I am sure you will make amazing content in the future
Thank you alot. This really helped me. I have been looking for a solution for some while now but none of them quite explained it as well as you did. Thank you
Wow, this really worked like a charm!
thank you man you save my day ! keep the good works, congratulations from france
This was a huge help, thank you!
short & great multi image slider video
thanks for this! super easy to follow along, keep it up!
thanks alot, this was exactly what i needed
You are brilliant. Your tutorial helped me so much and I really appreciate your work. Keep up creating great videos like this! 👏👏
Incisive explanation.
Great video!
Thanks for the video!
it helped me a lot, thanks bro
Awesome tutorial! Loved it.. It was really helpful.
Very well done! I would just want to add that you should add the first image on top of the duplicated, because the image might take a bit to load
Thank you so much, it helped me a lot 👏
thanku so much for givin this video
it is very simple and easily we can understand
Hello! thank you for this..
quick question, when it reaches the last image, will the first image moved to the next of the last image?
that's also my question . it's not infinite
Thank you for the Simple code and effective. But the images are not repeated. Is there any modification possible, so images will be infinite?
Change the timing of of the transform animation; the part that comes after the * in the translateX(calc...etc. I made mine a little longer and synced it so that the second cycle matched the 1st cycle of photos when it reset.
Brilliant! It works like a charm
Thank you so much! It works beautifully... You're amazing... Hope to see more contents soon...
is there a way,so that user could scroll left and right too?
Hi, can you send me the code, mine don't work !!!
The HTML code is not clear. Would you mind sharing the code file for download?
Kindly go to settings on UA-cam and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder
@@MagicalTalesTV001 🤣🤣
That's greate! Love this work. Thank you so much
Great solution! Love the code without JS!
Awesome video! Subscribed!
thank you, it was really helpful.
Awesome! Thank you for sharing.
Your video as helped me a lot to solve what I seek for, thanks for it
Bro , can you help me in this code ? My code is not working properly
Brillant, thanks for instruction !!
Great Video! thank you 🥰
THANK YOU!!!!
Thanks ! It's a great solution !
You are my life saver!
Thank you so much bro, I was stucked making these thing, I though it was using js
Awesome tutorial
Awesome tutorial my friend! Thank you for sharing all your knowledge with us. I have a simple question, what is the name of the background song?
thank youuuu sooo muuch it wasss sooo helpfulllllll :))))))
Awsome!!! thank you so much ❤❤❤
You're the Man!
Thank you helped alot!
this is wonderful , ty love
Hello!
This is simple and easy to understand.
Please share the code because it is not too much of visible actually.
Kindly go to settings on UA-cam and go to advance and select 1080px then go back to your video and enjoy this blessed animation video. God bless the coder
hi, i wanna add this in the middle of my website.. may i know what should i change the to? .. hope u could help 🙏🏻🥺
Very useful video❤
What will i do if the images are not of same width??
Hey The Mute Dev :)
I really like this tutorial and wondered if it is possible to add one specific thing: to turn the pictures into links so u can click them and get to a nother website, but the rest stays the same?
I think you can add the specific into another div, and just put a href on that image?
Simple i did that in my project just put the image tag inside the linking tag... eg.
@@Vinomillz Thanks a lot!! :)
it,s just amazing bro 👍👌
Hi danke fürs Video. Ist es möglich das die nächste Runde gleich hinter dem Ende beginnt?
for shadows we can use mask property right ?
Nop
Nice video short and sweet
La animación se vuelve brusca cuando termina y vuelve a empezar porque el navegador tiene que "saltar" de la posición final de la animación (translateX(-100%)) a la posición inicial (translateX(0)) de golpe.
Una forma de suavizar esta transición es utilizando la función animation-direction y estableciendo su valor en alternate. De esta manera, la animación se invertirá cuando llegue al final y volverá a empezar en la dirección opuesta, lo que creará un efecto de "rebote" más suave:
.slide-track {
display: flex;
width: calc(250px * 28);
animation: 50s slides linear infinite alternate;
}
@keyframes slides {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
by: Blackboxai
this worked awesome!
Man are you just formidable😇
Apenas CSS! Simples, fácil mas perfeito demais!!! 👏👏👏
Você tem esse código?
It went too fast for me, do you have the html and css files I can get from maybe github? Also if you want to have right and left arrow buttons on the right and left so user can slide themselves along with the animation that would help.
You see the place he added overflow: hidden; don't put it and you should have what you're looking for. Or just add overflow X to the main div and see m
Hi! This loops really cool! I want this but from top to bottom. How do I do this?
hey! Nice video.
Thank you so much bro :- )
But i want first image exiting from left of the screen should enter from right side immediately while other images should still keep moving a they were doing.
Calculate the timing in seconds using keyframe
wow, thank you for this video man, I love it, please Is there a source code for the tutorial
On hover effect only one slide or image is getting pause other are moving plz help me out?
This is brilliant. Any tips on what the code needs to look like if we want to create another slider just below this one? Tried giving the first and second sliders and id but no matter what I do, the second slider does not populate
Thanks for the video! My animation is not scrolling automatically, sjust stands still. In Chrome I used webkit for both animationa and @keyframes but still nothing. Anyone knows the answer?
I re typing your html code but it doesn't work, i barely using xampp but still doesn't work, i use vscode app i scan the error, nothing error notification
Hey friend and if I want it to start again once it reaches the end and never finished??
Set something like: e.g
Animation: autoRun 10s linear infinite;
Add to your parent div and you're good to go
Do you have the code for this posted anywhere?
How does the carousel stop on hovering image?
Thank you so much !!!
first image is not hovering animation for some reason help
Excellent video. How do I assign this style only to the slider images, I added this code on my website and it keeps changing all the other images as well besides the ones on the slider. Doing as you did in a new file works, the problem is when you add the code to a site, where it contains several other images, this problem occurs. Can someone help me? Thanks
put .slider then img ex. ".slider img {} "
how about to add your examples to codepen etc?=)
Thanks bro ❤❤
awesome 👏👏🙌
What happens when last image shows up!???
can we do this for end continue next slider
what is the code to move from left to right
thanks man
please give the source code
Ok, but it's not infinite. It doesn't repeat the whole row again
Sir( background-image:) esmy slide k liye gallery ki pics kecy save kiye jayn gi
for some reason i can't seem to make it work
how to move scroll in right direction please help
write 250px instead of -250px
GOAT
is this loop animation?
helpful 🤗🤗
جزاك الله خيرا
Eska coding kya hai please bataiye na please 🙏🙏🙏🙏
Thanks !
Is it responsive?
can you provide me the git link forthis
I can write you the code
my slide is not infinite :c
Can uh Plaese Give Code also?
hello sir in this video very best, can you give source code please
How to get this code ?
Awesome
helpful!
Thanks
bonjour! bonne compréhension de chaque étape et l’essentiel en avant et c est juste waouh. merci pour la vidéo je m abonne a ta chaine
Merci ;)
Legit tut