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

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

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

Where is pagination like on thumnail?

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

Thank you, you are the best

very very vey good thank you

Can you make this slider with navigation dots please ?

For everyone struggling with the problem that you can't scroll the page anymore on touch devices when touching the slider, change the following to make it work:

From this:
const dragging = (e) => {
if(!isDragStart) return;
e.preventDefault();
isDragging = true;
teamCarousel.classList.add("dragging");
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
teamCarousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
}


To this:
const dragging = (e) => {
if(!isDragStart) return;

const isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if(!isTouchDevice){
e.preventDefault();
}

isDragging = true;
teamCarousel.classList.add("dragging");
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
teamCarousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
}

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?

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

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.

r u the coder of amazon??

Nice music bro

Thank you very much

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

thank you very much

Nice tutorial. Im trying to do it, but instead of a carousel of <img /> im trying to do a carousel of <div> with background img or <div><img /></div> 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?

Best toturial i ever seen

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.

AWESOME!! Thanks 🔥🔥🔥

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 <img> element, set "draggable" back to "true";
2. In the <img> 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!.

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!

nice slider just want the source code

Trasition does not work in code that I dowloaded?

And more thing same work for cubic rotation 😎

That's what i realy asking for 😅

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.

Great instructions, guy.

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

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

thank you bro or sis for this i was need this

Thank you

Can u mae those on react js ?

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

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

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

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

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

also add active bullets point

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?

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.

Thank u :)

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

very good video! it helped me a lot!

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

That's using a lot of very cool tricks! Awesome video, and thanks for uploading.

Thanks bro, your video helped me a lot!

Great tutorial! Thx <3