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

In this video, I've shown how to Create A Draggable Image Slider in HTML CSS & JavaScript. I didn't use any external plugins or libraries to create this slider carousel. It's made with vanilla JavaScript and works fine on touch devices too.

🖼️ Get Images Only of this Image Slider

🗂️ Get Source Code of this Image Slider

🌐 Visit CodingNepal for helpful coding blogs

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work

Timestamps:
0:00 Demo of Image Slider
1:10 HTML & CSS Start
6:33 Making Carousel Responsive
7:20 JavaScript Start
7:45 Sliding Images on Mouse move
12:10 Working on Previous & Next Icon
20:24 Making Carousel Touch Friendly
21:58 Auto Sliding Middle Image to the Center

Music Credit:
Deep Sea by Vendredi

Something 'bout July (Instrumental) by RYYZN

Ikson - We Are Free [Official]

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

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

[sabrinashamsiddinova]

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

[gustavox]

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

[sadboyVI]

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

[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

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

[pamelaspetals]

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

[gobromyth]

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

[jimmylaughingroom]

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

[manuelenng]

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

[luizmeraki]

Thanks bro, your video helped me a lot!

[TB-nkgc]

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

[_mirzausman]

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

[xthpvws]

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

[zerog]

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 =

Then call upon the variable, scrollLeft.

If there are any other bugs let me know.

[kunalpawar]

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

[hasannee]

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

[yosh]

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?