@Santino Hector I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
Hello people! Also, you can add another event listener to check if the screen size changes and update the size variable accordingly, so it becomes responsive. This is what I did: I Changed this: const size = carouselImages[0].clientWidth; By this: let size = carouselImages[0].clientWidth; And I added this to the script: window.addEventListener('resize', () => { carouselSlide.style.transition = "none"; size = carouselImages[0].clientWidth; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); Thanks for these tutorials, Ed, you are great!
unfortunately doesnt work for me :( Any idea or tips? is there a specific position within the script for the new eventlistener to place it in? help would be much appreciated :)
@@ihatejart123 Here is the source code, feel free to explore/fork/download it and use it to your own need: github.com/Kevwas/image-slider/ If you want something a bit more advanced, taste this other image-slider I made with Bootstrap: github.com/Kevwas/image-slider-2/ Here there is another good example: w3schools.com/howto/howto_js_slideshow.asp
I was searching in youtube about this, I opened this video and when I see your intro I was like "YEEEEEEEEESSSSS" I missed your tutorials a lot, I'm now a laravel guy...
There're many tutorials out there but only you have videos giuding me with your voice and It's really understandable and really useful. Again, thank you alot!
Thanks for saving my job.I now feel confident.After looking more than 50 videos I finally got what I was looking for..(subscription-Done). Love from India
Hey! Great tutorial man! Any idea how we can use touch gestures like swipe left and swipe right to fire the previous and next events? Also, will this be responsive to viewport size? Thanks 🙏🏼
8:46; I found that making changes to the code and refreshing the page responds with the incorrect clientWidth, and so my slider remains on the lastClone image. I dont know why this happens, but to fix it, I have to use Ctrl+F5 to refresh the page instead of a normal refresh/reload.
I dont know why but after I used this part (found it way below in the comments) and just renamed the variable names (b/c i gave it different ones) it worked for me: carouselSlide.addEventListener('transitionend', () => { if(carouselImages[counter].id === 'lastClone') { carouselSlide.style.transition = "none"; counter = carouselImages.length - 2; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; } else if(carouselImages[counter].id === 'firstClone') { carouselSlide.style.transition = "none"; counter = carouselImages.length - counter; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; } });
Thank you so much for this tutorial ! It helped me a looooot ! Your explainations are very clear considering JS is soooo complicated haha thanks mate !
@@kazimuntasir maybe learn some more actual JavaScript before you do these tutorials. The point of this is not to copy his code but to see what logic is needed and if you know even basic js you can use this logic to build it without needing to copy code. There is no point to copy code if you don’t know how to debug it.
For me @8:51 If I check in the console with console.log(carouselImages[0].clientWidth) it returns the correct width, but if I do console.log(size) it returns 0.
Im confused with the first clone and last clone. I have the transition but but the first image doesnt transition back to the last image. It just keeps going till i run out of images
Good tutorial, my question is, why clone when you could have reset how you access to display the element would the "transitionend" event still work? I built a slider but everytime I press on the next or prev to reset the position it automatically slides to that original element and not doing what your slider does.
hi, i'm having the problem that the script is not working at all. i tried various options like external file or inline sricpt - that should not be the problem... please help me
My images are not fitting into that black box behind the images all the images are cut half in other images it is not a full image .. I hope you understood my problem and will able to help me.
the issue is with browser compatibility. Chrome supports clientWidth very well but firefox has issues with this property. As a quick fix I hard coded the value of size.
Hi, I am following along with the video and I noticed a couple of things. First is that there is more than one image instead of only showing one at a time. The second is when I ran the following code... carouselSlide.addEventListener('transitionend', () =>{ console.log('Fired'); }); No fired doesn't show up when I click next.
I just dont undersrand the syntax behind how we write this transform translate, and the way we use qotation marks and closures. Also cant find any information about it
Can you tell me what was the size of the pictures of yours? Because it is not matching with mine. I have been trying these pictures resolution code for 2 days but I still can't get it right... I hope you can help me ASAP...🙏🙏
Hi Dev, thanks for this amazinz video. im doing my own webpage and I got a problem with the imgs. In your video, the images fill up the container: carrousel-slide. Im trying to do the same, but mines doesnt. when i code display:flex, they go one beside the other, but they dont fill up the container. I gave them the exactly width and height on PS, but the same. is there something you could recomend. please...!!! thanks Cristian
Actually I based my slider on my website off this tutorial but I have a problem with the slider not actually working on my website until the page is refreshed. Help?
Try to do this like me: you add max-width: xxx px and min-width: xxx px on your .carousel-container, you can test it using Firefox Developer Tool for instance
Thanks man for this great tutorial, thumbs up and I hope to see more
4 ปีที่แล้ว +1
everytime I reload the page, only my clone picture appears and I can't move forward. I think that the counter messes up or something like that. Pls help!
4 ปีที่แล้ว +1
Fixed it! Just needed to change clientwidth to naturalwidth!
doesn't Work for me.. Uncaught TypeError: Cannot read property 'id' of undefined / .id === 'firtsClone' and for lastClone.. Can you explane me please ? Thank you..
the code is messed up the moment you add carouselSlide.style.transform= 'translateX(' + (-size*counter)+ 'px)' the following happens : scroll with mouse to zoom in and out and you will see multiple images within the frame(60% width border). images dont fit border, only works with 100% zoom, change the zoom and enjoy your headache.
It happens because size property is set upon page load. It is constant and doesn't change if you zoom or resize window. You can zoom page and then refresh, after that it should work fine. In fact this carousel is responsive, because it is not so common to change window size during use-time. If you want to make it 100% clean, just add an event, which would change 'size' property if page is resized. Like this: window.onresize = () => { size = carouselImages[0].clientWidth; carouselSlide.style.transition = "none"; carouselSlide.style.transform = "translateX(" + -size * counter + "px)"; }; And don't forget to set size as 'let' variable, since you can't change value of constant.
That transform = translate in js is bothering me. You used + in both previous and next, it should be moving in the same direction whichever button you click but wasn't. I'm mind blown but I'm sure I misunderstood this. Can someone explain?
Thank you for the tutorial ! I would like to know how to solve the error : it keep saying that : "app.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')" @@ it makes i press prev or next btn , it doesn't work :(
Your code doesn't work I've copied every single line and the main container div shows two images side by side and the buttons do not work unless I set the img to 100%.
thank you very much .... i need to add a pagination or bullets at the bottom , do you think you could help me in a simple way like that video? thanks ..
Sorry i can't understand this part of code ? can you help me a little... how is the first or last picture appearing in left or right when i am sliding ...please help :) if(carouselImages[counter].id==='lastclone'){ carouselSlide.style.transition='none'; counter = carouselImages.length-2; carouselSlide.style.transform = 'translateX('+ (-size *counter)+ 'px)'; }
We need more such tutorials like these. Handling small projects without use of any library is such a great way to learn.
13:43 "Fired" Relatable. Haha Thanks for such a great tutorial this has been a huge help, you're a wicked coder and I would love to see more.
@Santino Hector I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
It's always better to do things by yourself, especially if it's for learning purpose. Thank you very much for what you do.
I'm happen to use carousel in my project and I don't want to require bootstrap. So this is a great video for me!!!
same here but somehow the javascript doesnt seem to work on my page at all.. idk what going on
@@InGreed666 make sure if you linked the js file well
Hello people! Also, you can add another event listener to check if the screen size changes and update the size variable accordingly, so it becomes responsive. This is what I did:
I Changed this:
const size = carouselImages[0].clientWidth;
By this:
let size = carouselImages[0].clientWidth;
And I added this to the script:
window.addEventListener('resize', () => {
carouselSlide.style.transition = "none";
size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
Thanks for these tutorials, Ed, you are great!
unfortunately doesnt work for me :( Any idea or tips? is there a specific position within the script for the new eventlistener to place it in? help would be much appreciated :)
@@ihatejart123 Here is the source code, feel free to explore/fork/download it and use it to your own need:
github.com/Kevwas/image-slider/
If you want something a bit more advanced, taste this other image-slider I made with Bootstrap:
github.com/Kevwas/image-slider-2/
Here there is another good example:
w3schools.com/howto/howto_js_slideshow.asp
thanks for this! it works on my code. Issue was, when I click next or prev, it doesn't fully show the full picture.
@@annaylak2618 Glad it helped you :)
thank you so much! You've saved me!
I was searching in youtube about this, I opened this video and when I see your intro I was like "YEEEEEEEEESSSSS" I missed your tutorials a lot, I'm now a laravel guy...
oldie but goldie :) I really enjoy your "older" content. Keep up the good work
There're many tutorials out there but only you have videos giuding me with your voice and It's really understandable and really useful. Again, thank you alot!
Thanks for saving my job.I now feel confident.After looking more than 50 videos I finally got what I was looking for..(subscription-Done).
Love from India
Thanks for the positive feedback on these tutorials so far. Let me know if you want to see something else!
Works well, unless you use a page that's not full screen or resize the page during use, can you explain how to make it mobile/resize friendly?
Can you show how to add radio buttons at the bottom and control navigation of slides with that?
Hey! Great tutorial man! Any idea how we can use touch gestures like swipe left and swipe right to fire the previous and next events?
Also, will this be responsive to viewport size? Thanks 🙏🏼
How old are you ed please tell me
Hi Dev I have a query my buttons do not want to work please assist
8:46; I found that making changes to the code and refreshing the page responds with the incorrect clientWidth, and so my slider remains on the lastClone image.
I dont know why this happens, but to fix it, I have to use Ctrl+F5 to refresh the page instead of a normal refresh/reload.
It also happening with me , did you solve the problem now?
I think the first carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; is not working everytime.
The noises your mic is doing is real ASMR for me, thanks!
Ed, you are the best teacher on the internet. The way you explain the things are very easy to understand!
console.log(counter)
error
does not work. everything is working but the counter does not work.
can someone tell me why?
My get often stuck when I open the page but when I refresh, it's ok. What have I done wrong?
This is one of the best tutorials on this topic. It's short and sweet. Thanks for the great video. It was exactly what I was looking for.
my problem is this
Cannot read property 'id' of undefined.
at this line
if (carouselImages[counter].id === 'lastClone') {
please help me
Yap, same here.
I dont know why but after I used this part (found it way below in the comments) and just renamed the variable names (b/c i gave it different ones) it worked for me:
carouselSlide.addEventListener('transitionend', () => {
if(carouselImages[counter].id === 'lastClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
else if(carouselImages[counter].id === 'firstClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
});
I've used the same code as you did, but that didn't work out. So, I have made mine one following the same logic, and it worked out. Thx my man
can u tell me the code it doesn't work for me either
For responsiveness don't use the JS solutions posted below, just use this simple css:
.carousel-container {
width: 60%;
margin: auto;
overflow: hidden;
}
.carousel-slide {
display: flex;
aspect-ratio: 2 / 1; /*
God bless you man! After much torment, I found your video and made an infinite carousel. Thanks a lot!
I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
thank you! this was the only tutorial I could find that could do a nice smooth carousel. You explained it awesomingly.
Thank you so much for this tutorial ! It helped me a looooot ! Your explainations are very clear considering JS is soooo complicated haha thanks mate !
I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
@@kazimuntasir maybe learn some more actual JavaScript before you do these tutorials. The point of this is not to copy his code but to see what logic is needed and if you know even basic js you can use this logic to build it without needing to copy code. There is no point to copy code if you don’t know how to debug it.
@Tiaan van Aardt Thanks brother.❤️❤️
Lovely video, forgot to link the css file and spent 5 minutes reading out each line of code.
Keep up the good work!
I always love seeing this my friend coding and learn allot from him.. i wish i see him eye to eye someday 💓💓
Great Video about image slider! Especially that sliding effect is really awesome.
Loved this, super helpful!
For me @8:51 If I check in the console with console.log(carouselImages[0].clientWidth) it returns the correct width, but if I do console.log(size) it returns 0.
Im confused with the first clone and last clone. I have the transition but but the first image doesnt transition back to the last image. It just keeps going till i run out of images
greatest slider video that I see!!!! Thanks Ed!!!!!
guys, how to add auto slide on shits in js? for example after 5-10 second's slide automaticly?
So far you are one of my favorite teacher, also you make me laugh during ur explaining 😅
Good tutorial, my question is, why clone when you could have reset how you access to display the element would the "transitionend" event still work? I built a slider but everytime I press on the next or prev to reset the position it automatically slides to that original element and not doing what your slider does.
Wonderfully crisp and to the point, thank you for a grwat tutorial. It would be helpful if you linked the source code.
hi, i'm having the problem that the script is not working at all. i tried various options like external file or inline sricpt - that should not be the problem... please help me
Just came across this video, thank you for a fantastic tutorial, it's just what I needed to help finish my uni project
the code doesn't work can you help transitionend section doesn't work.
Same
If you find the solution do tell me
My images are not fitting into that black box behind the images all the images are cut half in other images it is not a full image ..
I hope you understood my problem and will able to help me.
Excellent video. Many thanks for taking the time to create this awesome tutorial.
hello ! my prev and next button not working .please why?
I have an error it says Uncaught TypeError: Cannot read property 'clientWidth' of undefined
same
same
the issue is with browser compatibility. Chrome supports clientWidth very well but firefox has issues with this property. As a quick fix I hard coded the value of size.
Uncaught TypeError: Cannot read property 'clientWidth' of undefined
I get this kind of headache, and buttons isnt doing anything...
same hereee! help
@@matahoneyy check if you are using queryselctor or queryselectorall
same here,, help please
same hereee. i even tried setting the size to #lastClone.clientwidth and nothing happens
Really Thank you so much for this wonder full trick. Please add more components like this!
I would like to buy a course if you have one
My arrows are moving along with the images and disappears after one click. Any solution ?
the script stops working if u reload from the button but if you ctrl+f5, everything is fine?
Hi, I am following along with the video and I noticed a couple of things. First is that there is more than one image instead of only showing one at a time. The second is when I ran the following code...
carouselSlide.addEventListener('transitionend', () =>{
console.log('Fired');
});
No fired doesn't show up when I click next.
For one image at a time, check your css, in parent container, use overflow:hidden
i had this problem
my problem was in this line
carouselSlide.style.transition = "transform 0.4s ease-in-out"
0.4s was 0.4 so fired didn't work.
I just dont undersrand the syntax behind how we write this transform translate, and the way we use qotation marks and closures. Also cant find any information about it
My slider didn't work when dimension of my screen in less then 420px(for mobile version) did somebody know why? otherwise it does everything right.
Nice Video. Why does clientWidth return 0 when I reload the page? Is there a solution ?
Can you tell me what was the size of the pictures of yours?
Because it is not matching with mine. I have been trying these pictures resolution code for 2 days but I still can't get it right...
I hope you can help me ASAP...🙏🙏
Hey Ed,
I didn't get the counter part.
what is counter doing and how you shift the original image in the slider??
plz help me.
I wrote the same code for 1920x1080 resolution pictures but when I am resizing it the site is not looking much responsive
Hi Dev, thanks for this amazinz video. im doing my own webpage and I got a problem with the imgs.
In your video, the images fill up the container: carrousel-slide.
Im trying to do the same, but mines doesnt. when i code display:flex, they go one beside the other, but they dont fill up the container. I gave them the exactly width and height on PS, but the same.
is there something you could recomend. please...!!!
thanks
Cristian
did you figure it out im having the same problem
set the width and height of the image to the same width and height of the container
i have also same issue)
Try increasing just the height..in my case setting height to 700px fixed the issue
Actually I based my slider on my website off this tutorial but I have a problem with the slider not actually working on my website until the page is refreshed. Help?
Oof how would you make this mobile responsive. It sizes down my images when i size my window down
Try to do this like me: you add max-width: xxx px and min-width: xxx px on your .carousel-container, you can test it using Firefox Developer Tool for instance
just declare the elements as a flex box
media query
const carouselSlide = document.querySelector('.carousel-slide'); syntax error at that part :( Someone know why?
Now i can create a carousel ......
// Thanks A lot brother......
great stuff mahn.. learnt a lot
Hi!
I was not able to understand this at 19:35 :-
if (counter
Returning nothing if count
I get error saying cannot read property 'clientWidth' of undefined
Thanks man for this great tutorial, thumbs up and I hope to see more
everytime I reload the page, only my clone picture appears and I can't move forward. I think that the counter messes up or something like that. Pls help!
Fixed it! Just needed to change clientwidth to naturalwidth!
@ thanks for the advice i have the same problem.
never mind did't work for me
That's very nice video! Really easy to understand.Thanks very much
doesn't Work for me.. Uncaught TypeError: Cannot read property 'id' of undefined / .id === 'firtsClone' and for lastClone.. Can you explane me please ? Thank you..
Thanks Man I look forward to Watching more of your videos
I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
Do you have a github repo link for this?
the same coding is not working. .... all the images are displaying in one div .....
hey I have a problem with the photos being stretched or tightened-up when there is not enough space or too much space. How to fix that?
object-fit:cover ; write this into your css code.
thank you very good explanation learned a lot of mechanics just from this video
this is what i search for a week
Thanks for the tutorial !
It was so simple and fast than the other on the Web :)
I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
@@kazimuntasir Sorry, i made it 1 year ago. But you need to try and get help from Discord servers or forums
@@Matancy I have been trying this for the last 4 days, but unsuccessful. I can't find my error.
I'm trying to find that.
Thanks for replying bro
perfect tutorial. Keep up the good work! :))
amazing tutorial!
the code is messed up the moment you add carouselSlide.style.transform= 'translateX(' + (-size*counter)+ 'px)' the following happens :
scroll with mouse to zoom in and out and you will see multiple images within the frame(60% width border). images dont fit border, only works with 100% zoom, change the zoom and enjoy your headache.
It happens because size property is set upon page load. It is constant and doesn't change if you zoom or resize window. You can zoom page and then refresh, after that it should work fine. In fact this carousel is responsive, because it is not so common to change window size during use-time. If you want to make it 100% clean, just add an event, which would change 'size' property if page is resized. Like this:
window.onresize = () => {
size = carouselImages[0].clientWidth;
carouselSlide.style.transition = "none";
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
};
And don't forget to set size as 'let' variable, since you can't change value of constant.
@@tadas4785 thanks for the replay, yah i figured that later,
hahahaaha enjoy your headache
It was fabulous...Thank you for making it.
You are genuinely an awesome and funny guy
great explanation and logic🔥🔥
i who press like number 1000 and this first video i watched to u and i want to say your amazing
dev ed bro u are a little bit fast! You are awesome no doubt! But it would be helpful if you add more explanations!
Uncaught TypeError: Cannot read property '0' of null
at main.js:27
at this line: const size = carouselImages[0].clientWidth;
That transform = translate in js is bothering me. You used + in both previous and next, it should be moving in the same direction whichever button you click but wasn't. I'm mind blown but I'm sure I misunderstood this. Can someone explain?
transitionend doesnt work for me, do u know maybe how can I fix it
super thanks!!! i was so touched by your lecture and kindness
Melhor carrossel visto por mim até hoje, parabéns, agradeço, pois me ajudou em uma tarefa dificil de um carrossel com 40 imagens. Brasil
how to make it draggable left and right with hand icon?
my images only take up 50% of the container..so 2 pics are seen at once..what i do?
I can’t see the arrows. When I inspect the page it’s says the arrows are there, but you just can’t see them.
Do you have similar for videos? like if you want to replace those images with video clips
Thank you for the tutorial ! I would like to know how to solve the error :
it keep saying that : "app.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')" @@
it makes i press prev or next btn , it doesn't work :(
Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')
Your code doesn't work I've copied every single line and the main container div shows two images side by side and the buttons do not work unless I set the img to 100%.
transitionend not working in chrome and the code doesnt work in firefox
thats great my friend, thank you for this video
This is very effective tutorial for me.Thanks you dev ed.
Amazing tutorial! thank you for making it!
I have followed all instructions, but my carousel isn't working. Would you please kindly send me your code...so that I can find my error. Thanks
I cant find the same fontawesome link that you entered. what can I do???
hey dude ,can you help me out i want to make a smaller version of this to put in a page but it doesnt seem to work how can you help me out?'
thank you very much .... i need to add a pagination or bullets at the bottom , do you think you could help me in a simple way like that video?
thanks ..
Can anyone help me, its driving me mad. I cant get "const width = carouselImages[0].clientWidth;" to return anything but 0.
my problem was that I wrote document.querySelector('img') but instead of this we need to write document.querySelectorAll('img'), maybe it'll help you
Your script tag needed to be at the end of the html of the not at the top
Sorry i can't understand this part of code ? can you help me a little... how is the first or last picture appearing in left or right when i am sliding ...please help :)
if(carouselImages[counter].id==='lastclone'){
carouselSlide.style.transition='none';
counter = carouselImages.length-2;
carouselSlide.style.transform = 'translateX('+ (-size *counter)+ 'px)';
}
i copied the hole thing but it is not working. After last img 1st img is not coming