Thanks for the positive feedback on these tutorials so far. Let me know if you want to see something else!

@Student-fd4go

5 жыл бұрын

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?

@sugandharao4221

5 жыл бұрын

Can you show how to add radio buttons at the bottom and control navigation of slides with that?

@armanhanda

5 жыл бұрын

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 🙏🏼

@ayyubayyyub9415

5 жыл бұрын

How old are you ed please tell me

@kulumwangu3366

4 жыл бұрын

Hi Dev I have a query my buttons do not want to work please assist

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.

@kazimuntasir

3 жыл бұрын

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

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!

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!

@ihatejart123

3 жыл бұрын

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

@kevinariza603

3 жыл бұрын

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

@annaylak2618

3 жыл бұрын

thanks for this! it works on my code. Issue was, when I click next or prev, it doesn't fully show the full picture.

@kevinariza603

3 жыл бұрын

@@annaylak2618 Glad it helped you :)

@stormyandink8549

2 жыл бұрын

thank you so much! You've saved me!

oldie but goldie :) I really enjoy your "older" content. Keep up the good work

i encounter an error when have two item(image), please help me, thanks.

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.

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

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

@InGreed666

5 жыл бұрын

same here but somehow the javascript doesnt seem to work on my page at all.. idk what going on

@hamzadahmani9489

4 жыл бұрын

@@InGreed666 make sure if you linked the js file well

Ed, you are the best teacher on the internet. The way you explain the things are very easy to understand!

can i use this method for videos or it works only with images and what about responsiveness? please teach us.

thanks in advnace but theres sth i cant figure out translae x -value goes left and translate x + value goes right you wrote the opposite

How could I set 5 img, for example, side by side and the move to the right ou left?

thank you! this was the only tutorial I could find that could do a nice smooth carousel. You explained it awesomingly.

Many thanks for the tutorial. It has been very helpful. Long shot to get an answer, but I was wandering how I could put a text on only one of the slides? Since they are not divs, I cannot add any text without having it wither on all slides or like an bitmap on my image.

Loved this, super helpful!

Do you have a github repo link for this?

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

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

hi there! I'm having an issue when i click next button a couple times it automatically returns to the first image

Just came across this video, thank you for a fantastic tutorial, it's just what I needed to help finish my uni project

The noises your mic is doing is real ASMR for me, thanks!

need help I get on the java part "X" not defined!

All Images are stuck in the first DIV... tried all the browser but same effect... any help? ...please

Do we need to use all the images in a same size? because some of my image is in low quality

Great tutorial, I want to know if the JavaScript would work for multiple sliders on a page or I'd have have to duplicate the JavaScript for as many sliders as I would have on the page?

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?'

every time i click and it goes to the next image it offsets it so the image keeps moving down

God bless you man! After much torment, I found your video and made an infinite carousel. Thanks a lot!

@kazimuntasir

3 жыл бұрын

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

Lovely video, forgot to link the css file and spent 5 minutes reading out each line of code. Keep up the good work!

can I add swipes in this carousel, or I need to change architecture?

Great Video about image slider! Especially that sliding effect is really awesome.

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)'; }

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?

@pedramkarimi1819

3 жыл бұрын

object-fit:cover ; write this into your css code.

Hi there! i see you are using vs code, as well as I do. I have trouble when trying to set grid-template-are, whenever I save it code transform in one line, can you please be kind and help me ?

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.

Thank you. Great tutorial. Please tell me which theme you using in visual studio code?

ty for the easy explanation! unfortunately the slider isn't working on firefox, do you have an idea how to fix that?

hello , How can we make slides crossfading instead of ease-in-out many thanks for your help

Hi! Thanks for your tutorials, i really enjoy them. But i have a proplem with this one/. I was following the unstruction in the video, and made exact same code. But transition and buttons just don't work and also there is an error in the first line "Parsing error: The keyword const is reserved" . I use Brackets, just updated version yesterday. Does anyone have this problem?

@ULYSSES2413

5 жыл бұрын

I think you can use the word "var" instead.

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; /*

Thanks man for this great tutorial, thumbs up and I hope to see more

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.

why when I use fontawesome icons it doesn't work while using buttons it works?

how to add them carousel bottom buttons?

my problem is this Cannot read property 'id' of undefined. at this line if (carouselImages[counter].id === 'lastClone') { please help me

@chrisj.2611

3 жыл бұрын

Yap, same here.

@chrisj.2611

3 жыл бұрын

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)'; } });

So far you are one of my favorite teacher, also you make me laugh during ur explaining 😅

Hi how do I make this Javascript work for several sliders?

How would you make this responsive? Can that be done in CSS only?

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

Nice Video. Why does clientWidth return 0 when I reload the page? Is there a solution ?

I wrote the same code for 1920x1080 resolution pictures but when I am resizing it the site is not looking much responsive

hello ! my prev and next button not working .please why?

I cant find the same fontawesome link that you entered. what can I do???

Would this work in reactjs? Please help

console.log(counter) error does not work. everything is working but the counter does not work. can someone tell me why?

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

3 жыл бұрын

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

@tiaan_va

2 жыл бұрын

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

@kazimuntasir

2 жыл бұрын

@Tiaan van Aardt Thanks brother.❤️❤️

the script stops working if u reload from the button but if you ctrl+f5, everything is fine?

when I click next more than three times a black image appears. Why is that?

perfect tutorial. Keep up the good work! :))

greate video once again! can u please suggest correct img dimensions for that carousel? or in general good image dimensions?

the same coding is not working. .... all the images are displaying in one div .....

why i use 'transitionend' event like you but it's doesn't work. Am I wrong or my version browser not accept this event ?

const carouselSlide = document.querySelector('.carousel-slide'); syntax error at that part :( Someone know why?

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

I always love seeing this my friend coding and learn allot from him.. i wish i see him eye to eye someday 💓💓

Excellent video. Many thanks for taking the time to create this awesome tutorial.

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

@andreistar0533

4 жыл бұрын

can u tell me the code it doesn't work for me either

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! Thanks for a great tutorial. I just have an issue when changing the size of my screen. The images start to show the next one if I make the screen too big and cuts off the image if I make it smaller. If you have any tips on fixing that? Thanks again for a great vid!

@Rakiraa

2 жыл бұрын

I have the same problem, but only when I'm making the screen smaller

It was fabulous...Thank you for making it.

How can I bring down the photos in the center? because my navigation bar has been covered; also how can I hide the photos when I am going to click the "bars" icon? BTW, I subscribed to your channel last day and I always watch your vids about web dev

Thank you, but how to make the slideshow responsive when you stretch the window? Looks like if I stretch my window bigger or smaller, the image will display inproperly

@tiaan_va

2 жыл бұрын

It is responsive. Resize your window and refresh the page. No normal person will manually resize a window while they are already busy scrolling. The js uses the client width of the element as it is after the page is loaded. It will stay like that until the page is reloaded at a diff size. So if this loads up on a mobile device it will fit to the smaller views. If you want the client width to be responsive then you need to add an event listener to the window size so it updates while the user changes the window size,but this is overkill and will make the page slower for no good reason since 99.999% of people won’t be actively resizing the window after it has been loaded.

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.

@mayankkumar1417

2 жыл бұрын

It also happening with me , did you solve the problem now?

@mayankkumar1417

2 жыл бұрын

I think the first carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; is not working everytime.

I get error saying cannot read property 'clientWidth' of undefined

transitionend not working in chrome and the code doesnt work in firefox

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.

super thanks!!! i was so touched by your lecture and kindness

Wonderfully crisp and to the point, thank you for a grwat tutorial. It would be helpful if you linked the source code.

How can I make the slideshow also change to the next image automatically? I have tried using setinterval() but I am not able to get it working at all... Anyone can help me? I am using the code he showed in the video.

Thank you! But please make the font on vscode bigger next time, is hard to follow along the tutorial

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.

sir pls tell me how to add advertisement in my website dynamically

transitionend doesnt work for me, do u know maybe how can I fix it

I wrote the code down but I seem to have trouble with the carousel starting at the last clone instead of the actual first image. Side note It fixes itself if I click refresh fast enough. Do I need to fix the carousel according to the size of the images?

@oracle7858

4 жыл бұрын

ForsakenPhoenix did you set the initial transform to translateX(-size)?

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 :(

Amazing tutorial! thank you for making it!

@kazimuntasir

3 жыл бұрын

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

Can you please do another video on this with adding navigation indicator dots as well at the bottom center of the carousel and also instead of sliding, with fad animation. Thanks!

how to make it draggable left and right with hand icon?

Muchas gracias amigo! Thanx a lot!! Excelent tut!! You're the best!

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?

Do you have similar for videos? like if you want to replace those images with video clips

How would you go about making this responsive/resizable? Right now when I try to resize the window, it translates incorrectly. :/

@Luckywynne

5 жыл бұрын

Nvm, I got it. I placed the size variable declaration and carouselSlide transform into its own function so that I could call it normally and also within an event listener for when the window resizes. Seems to be working so far! :) let size; setSize(); window.addEventListener('resize', () => { setSize(); }); function setSize() { size = carouselImages[0].clientWidth; carouselSlide.style.transform = `translateX(${-size * counter}px)`; }

@developedbyed

5 жыл бұрын

Glad you figured it out

@michaelchang3488

5 жыл бұрын

@@Luckywynne HI! May i ask you a question ? What is the principle of working with these codes?

My arrows are moving along with the images and disappears after one click. Any solution ?

is there a way to automate the slider?

does not work well with the responsive version. how to fix this?

every time I reload my live page (live reload) the javascript just gets ignored for some reason but it works if I close the tab and then open with live server again please help!!

4 жыл бұрын

Im having the same problem! :(

@stathisstathopoulos9007

4 жыл бұрын

@ Hard refresh. ctrl + shift + r.