Create A Draggable Image Slider in HTML CSS & JavaScript | Mobile Friendly Slider in JavaScript

[@CodingNepal]

Watch this video for infinite image slider: kzbin.info/www/bejne/bIKoaZeOpp6Ghac

[@luczztem]

brother I have also come across some bugs with this slider: 1. On mobile, if you scroll vertically (to scroll the page) holding inside the slider, it won't scroll; 2. If you scroll past 1 item (to move like 2, 3 or 4 items), it moves back to slide just 1 item (it's annoying for the user experience); 3. If you keep scrolling to the same side after there are no more images, it gets a weird margin and the images becomes unaligned; I have fixed it, but had to sacrifice the sliding functionality using mouse (it still works on mobile). I used pure CSS to manage the sliding, and removed your javascript slider solution (I'm sorry), but I still used your JS for the buttons (they work great). This way is much simpler and I think it works the same. Here's what I did: 1. In the element, set "draggable" back to "true"; 2. In the element, added CSS: "scroll-snap-align: start;" 3. In the ".carousel" element, added these CSS styles: .carousel { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ scroll-snap-type: x proximity; scroll-behavior: smooth; overflow-x: scroll; } .carousel::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome, Safari and Opera */ } To make the left and right buttons disappear when there's no item's left, I just increased the setTimeout() time to 250ms. Thanks again for this content bro, spared me a LOT of time and hair xD. Godspeed!.

[@luczztem]

I'm back bro, this time I, with the help of God, really fixed the autoSlide function xD. Here is what I did: 1. Removed your if (carousel.scrollLeft == carousel.scrollWidth - carousel.clientWidth) return and substituted with if (carousel.scrollLeft == 0) { return (carousel.scrollLeft = 0) } if (carousel.scrollLeft == carousel.scrollWidth) { return (carousel.scrollLeft = carousel.scrollWidth) } 2. Created a new variable below "firstImgWidth": let imagesToScroll = Math.round(positionDiff / firstImgWidth) 3. Modified the varDifference variable to this: let varDifference = positionDiff > firstImgWidth ? firstImgWidth * imagesToScroll - positionDiff : firstImgWidth - positionDiff That's it bro, worked for me. Again I thank you, I learned a LOT trying to solve this! But it still has the mobile problem where if you scroll vertically holding on the slider it wont scroll. I think a way to solve this would be to stop calling the JS functions below certain screen-size and add the CSS classes with media queries (because they conflict with the JS functionality)... but idk, there may be a better way to do this. Do you know how to solve this problem? God bless.

[@danteeep]

@@luczztem i just disabled the scrolling functionality for now by adding this code under the javascript code: // Remove touch event listeners for dragging carousel.removeEventListener("touchstart", dragStart); document.removeEventListener("touchmove", dragging); carousel.removeEventListener("touchend", dragStop);

[@luczztem]

bro this tutorial is just perfect. this is the best carousel I found searching for hours! you helped so many people with this tutorial... may God bless you greatly!

[@MrViciousway]

Yo, that was the best tutorial i have found for a responsive carousel 🙌🔥🖤 I tweaked it a little to fit my needs but wow, overall I'm so thankful to your walk-through!! - Favorite trick I learned was honestly the simple CSS trick for adding width to the .carousel img. I never thought about using width: calc( ) function and divide the 100% width by the amount of pictures you want on the screen. Nothing loses its shape 🙌 loved it. Can't believe I never thought of that.

[@luczztem]

lollll bro I 100% agree. the calc() aproach is awesome, and I spent at least 1 hour searching for a good carousel, and this one is simply perfect! props to this man! 👏👏👏

[@_Greenflag_]

Thanks for you tutorials, did use it as a basis and changed some code to make it simpler. For example, I use a variation in % to know where to autoslide. You should properly test it though, there are still a lot of bugs. Only to cite a few : - If you resize and you are not on the first element, responsive will be broken. - If you drag / touch / move more than one card, you will be bounced back - If you press quickly on next element, scroll will be uncorrectly computed - Etc.

[@sabrinashamsiddinova7691]

first time making carousel and totally new to JS, I learned a lot and now can surely make it myself, thank u , man. Without even speaking u taought me a lot. May Allah bless u

[@sadboyVI4]

Awesome, now you need to create a comment system like KZbin with PHP, believe me it's a good idea. 😁👍

[@CodingNepal]

Thanks for the idea!

[@hackerprime9722]

I agree!

[@tomascarignano5002]

So goooooood! Best custom carousel on youtube

[@um_coolio]

Thank you so much Bro Love from Pakistan...❤❤❤❤

[@gobromyth]

Thanks a lot. This is by far the best tutorial out there for creating a responsive image slider 👍

[@pamelaspetals1348]

Thank you for taking the time to do this video. It's extremely helpful.

[@gustavox645]

Excellent tutorial, a really nice draggable carousel, and I've learned a some new things that I didn't knew, thank you!

[@piuspolocha]

I will be very glad of you create a website that have admin and user dashboard at the same time using JavaScript and nodejs which less routes on the website Thanks you the best so far

[@floris3766]

@CodingNepal Thank you for this video, very helpfull. I do like to suggest one thing: to bind mouseup to the document element instead of the carousel element. This way when the user releases the mousemove outside of the courousel element it will still stop the dragging event. Cheers.

[@manuelenng]

This is good development. You really did account for all possibilities.

[@_Greenflag_]

Hmmm. Never skip the testing part in your code :)

[@NGCHIENCHYN]

srry but where is the dots at the bottom like in the thumbnail?????

[@zerog1037]

I came across 2 problems using this code, 1) The buttons don't disappear when on first/last slide when pressing them. Fix: Call showHideIcons() at page load and then add an event listener for scrolling. showHideIcons(); carousel.addEventListener("scroll", showHideIcons); 2) There is a bug tht prevents the MaxWidth calculation from being used when a decimal is present. Fix: const scrollLeft = Math.round(carousel.scrollLeft); Then call upon the variable, scrollLeft. If there are any other bugs let me know.

[@rekhavideos1254]

Thank you so much I am searching from last 2 day for this video

[@CodingNepal]

Happy to help

[@kova_hi5605]

6:17 у меня на этом моменте почему то кнопки оказались в верху страницы

[@qutubvisualchamp]

i want to add text using cards..how can i do this

[@jimmylaughingroom8342]

what a great tutorial after a long search so far this was the best. thank you.

[@CodingNepal]

Glad it was helpful!

[@botruong1620]

Can you make this slider with navigation dots please ?

[@FelipeBrocca]

Nice tutorial. Im trying to do it, but instead of a carousel of im trying to do a carousel of with background img or and i just cant make it work. I think it should be because of pred styles differences between div and img tags but i cant find them to make it work. Do you know any help?

[@ashu3128]

hey,same is with me ,have you found any solution?

[@AlSamadi3]

Bro that's fantastic but I want to use it more than one time in the same page , when I use it more than one time the first one works only . Please tell me how can I use it more than one time.

[@sarahesparza1163]

same struggle here:(

[@hephh6477]

same i think its to do with the firstImg on the js file but idk how to work with javascript

[@yosh2248]

I copied everything line for line and yet for some reason the arrows will sometimes move the images a full slide's worth, like it's supposed to, and other times it will only move a few pixels. Why does it do this?

[@en_kratia]

Thank you CodingNepal.

[@vikrambais4885]

this helped me clearing my job interview . thank you . i got a package of 10l

[@CodingNepal]

Great job! All the best.

[@musuhabadi2534]

why carousel is using "what-space = nowrap" instead using flex ?

[@srs8074]

Please make looping carousel (infinite slider)

[@CodingNepal]

Okay, I'll try to make a video on it.

[@redaloui]

Just add a trigger to the next button.

[@jasaperancangsitusweb]

@@CodingNepal i'm waiting, sir😁

[@CodingNepal]

Watch this video for infinite image slider: kzbin.info/www/bejne/bIKoaZeOpp6Ghac

[@oscar_cornejo]

Can you make this slider with navigation dots please? 🤔

[@TheAnimationSquirrel]

Best toturial i ever seen

[@luisromagua]

AWESOME!! Thanks 🔥🔥🔥

[@AldoAnz]

How to create multiple image slider? I tried to create another slider but it's not working

[@radifanazman]

did u alrready found solution?

[@AldoAnz]

@@radifanazman not yet

[@sneakycheeky531]

@@AldoAnz how about now? ;)

[@eelguneezmemmedov1671]

Can u mae those on react js ?

[@luispaulocavalcante1459]

How wonderful! 😍😍🤩

[@CodingNepal]

Thank you! :)

[@sosscs]

why I cannot use the slider(or wrapper and carousel classes) multiple times on the same page? any tips to fix this? because I have multiple sections with images sliding

[@thanhhieunguyen3949]

i use e.preventDefault in mousemove , this will select image and drag, if i use e.preventDefault in mousedown, this will not happen. You use e.preventDefault in mousemove can't understand. Please help me

[@santiherrera7122]

19:29 i have an error and i cant fix it

Very Good !!! and is there an option to leave the slide on Auto Start ?? after 3 seconds for example?

[@codingautodidact]

Where is pagination like on thumnail?

[@Татьяна-ц3к8о]

Hello. Thank you for the video. Need help. I've searched a lot and can't find the right answer. I need to make an endless slider carousel according to a tutorial project. each new slide contains a pseudo-random set of cards + cards are not repeated in the current block of the slide + only one previous state is retained+ every time the page is reloaded, a new sequence of cards is generated+ card sets are generated based on 8 objects with animal data+ in the next block there is no duplication of cards with the current block. - it can't be implemented. the rest I`ve done

[@TheHanzSladky]

Hi, i use this carousel in vue3 and draggind on mobile not working, i dont know why, code i have the same.

[@avion4]

what do I have to change if I want div instead of img ? thank you

[@erturkyorulmaz7376]

Trasition does not work in code that I dowloaded?

[@hongthaiduong9561]

Well done sir!

[@luizmeraki]

Thanks bro, your video helped me a lot!

[@awaisrajput9921]

mate you'r a champ of js

[@CodingNepal]

Glad you think so :)

[@HeyingInternational]

i did the same but now working properly, what gone wrong?

[@uchoatran1917]

Great instructions, guy.

[@jayaqshay466]

when i put const on the java it shows error the 'const' is reserved what should i do

[@artist3587]

I hv checked each and every line..I'm unable to scroll.. Its giving cannot read null values(adeventlistener) though Though I have used script tag at the end... PLEASE GIVE ME SOLUTION 😥😥

[@HuyenPham-ss9pz]

Great tutorial. Thank you very much! I just don't understand why import the font Poppins, as far as I know the font only applies to text. while this carousel only has images. So what role does the font play in this carousel?

[@badis6717]

Its a normal thing for codingNepal , he don't need a reason

[@cameronfletcher6506]

Can someone tell me what I would need to change in the javascript if I wanted to duplicate this same slider with different images?

[@radifanazman]

how to create multiple slider, on me its not working?

[@luke4372]

Could you please explain me why do you minus horizontal value 2 times Sorce:- Let possitionDiff = e.pageX - prevPageX; Carousel.scroollLeft= prevScrollLeft - possitionDiff; When you do that what are the values comes up? Please explain 🙏

[@greynoso11]

Can someone please explain to me why carousel.scrollLeft is still 0 after clicking on the right arrow the first time?

[@greynoso11]

Okay so it seems to be some kind of delay hence the setTimeout.

[@kova_hi5605]

6:17 At this moment, for some reason, the buttons were at the top of the page

[@mdms4549]

Awesome!!! Thank so very beautiful

[@CodingNepal]

You are so welcome

[@rishabhkundravlog3101]

Why does it always show this error? "This site can’t be reached".

[@anandbaraik5010]

Thank you for creating this.

[@mateuszkujawa3112]

Great tutorial! Thx

[@rtxgamelab.official]

That's what i realy asking for 😅

[@milosbrajovic5096]

It doesn't work in Firefox, do you know why?

[@superprogrammer30]

Thank you, you are the best

[@mohamadalkhalafalbarho5841]

what means this part of code let isDragging = false, prevPageX, prevScrollLeft;

[@usmanakram9296]

declared those two functions which will call on isDragging variable

[@mohamadalkhalafalbarho5841]

Can you explain more, I don't understand yet

[@GiorgiRatiani31]

how am i suppos to make it infinite loop?

[@yamillayicov7256]

Thanks for video

[@rtxgamelab.official]

And more thing same work for cubic rotation 😎

[@lucasuriel3019]

very good video! it helped me a lot!

[@Abhicoder]

Very nice sir!

[@CodingNepal]

Many thanks

[@rohitmahajan-td4oj]

thank you bro or sis for this i was need this

[@maskman4821]

Awesome 🤩

[@CodingNepal]

Thanks 🙌

[@tonyvito5062]

Thanks I waited for this tutorial for long time :) could you make it an infinite slider?

[@CodingNepal]

Okay, I'll try to make a video on it.

[@anandbaraik5010]

@@CodingNepal will be waiting.

[@luczztem]

he really did :0

[@goblin_gibs]

Great video! I ran into an issue though where the right button wouldnt disappear when it reached the end of the carousel, To anyone with a similar problem my friend solved it by replacing "==" on "arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";" to ">=" or "

[@kamal2312]

Hello !! There is a bug on Mobile that if you want to scroll vertically while holding inside the slider or component, the vertical scroll is blocked and you cant scroll. With that bug fixed it would make the carousel perfect !!

[@danteeep]

i just disabled the dragging functionality for now by adding this code under the javascript code: // Remove touch event listeners for dragging carousel.removeEventListener("touchstart", dragStart); document.removeEventListener("touchmove", dragging); carousel.removeEventListener("touchend", dragStop);

[@shubhammishra1235]

Can you make employee Checkin Checkout and timesheet apllication in php?

[@mdsohail8657]

Thanks bro❤

[@kunalpawar8446]

Nice video very understands the code. Can you make pagination with pure javascript

[@footballfocus-q5r]

works with keyboard?

[@hasannee]

This video very help me, Thank you creator. But can you make for the card?

[@TB-nk1gc]

Thnx for the amazing video. How do I decrease the image size because they are too big for my website?

[@learndigitalskills8932]

bro I'm facing error. Uncaught TypeError: carousel is null

[@learndigitalskills8932]

Its working, I didn't use defer in the , It was looking useless to me, and I wasted many hours finding the error. LOL

[@CodingNepal]

Yes, defer attribute is required there. This attribute use to execute script after the document is parsed.

[@AllMediaInWorld]

very very vey good thank you

[@dimasnytin]

Good job💪

[@CodingNepal]

Thanks 🔥

[@davidconteh2231]

Great video.

[@hannahtrust6093]

awesome content thank you so much

[@MarcosVinicius-wf1mw]

Men, how I pass it to react

[@lankasurendrababu2038]

Excellent

[@CodingNepal]

Thank you.. keep watching!

[@satishmallick7050]

also add active bullets point

[@DemoF8]

thank you very much

[@3ajebplus]

Pls make video about drag down to close

[@CodingNepal]

Okay

[@jernejkrajnc7263]

Mate thats great. Thanks! But a infinite slider would kill it. 😁

[@henrykmatthew3900]

Nice music bro

[@codingsolutionpoint6802]

please give me source code.

[@MarcosVinicius-wf1mw]

3$

[@FrankGP.Systems]

woww thank

[@AmitBhai-sb4vt]

r u the coder of amazon??

[@SakinaDevjani-qu5fl]

19:45

[@CharbelTohme-r3z]

I was searching for too long for this video...can someone share the code?

[@YashSingh-ex9xn]

Bro Create A Video On How To Make A Billing Website

[@jernej875]

For those who cannot view source on the demo webpage, just press F12 and bypass that dumb alert.