Simple IMAGE CAROUSEL/SLIDER in JavaScript & Sass

An image carousel (or image slider) displays a series of images in a visually appealing and easy-to-use manner, by presenting next/previous navigation buttons, presenting bubbles indicating the current position in the carousel, and by using animations to make the whole thing look smooth.

Plus: Pictures of mushrooms! :)

GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

Not a geek? Start today!

[olliphpsw]

You are typing all that by yourself so fast (without copy &paste) ...I hope to see more videos from you. You are really great.

[TheFallinforyou]

This has to be the simplest one there is. Thanks for this!

[mosialive]

I Have always been wondering how they get those photos to SLide. Now I Understand it's the position that we manipulate.

THanks a lot GeekLaunch

[jsond]

Thank you for this. There are not as many good vids on vanilla js for popular components (lightbox, accordion, tabs, etc) as I hoped as most are jQuery or use a framework. This is definitely one of the best ones on a slider. Am hopeful you can do the same vanilla js tutorials for other poplular components like the ones listed below. Even if not this one is very much appreciated.

[ga]

Thanks man, this is one of the best Javascript if not the best tutorial, a person can learn good javascript techniques from your video, thank you so much for sharing this video, I will subscript in your channel and hopefully, you can send me the notification in the future, and thank you a million for making the source code available.

[dannyguebueno]

Geek, I was able to put the start with setInterval, now as I do to be with infinite loop, that when I pass all images after the fourth starts again without going back to the beginning, like 3d, 1234 and start again 1234 does not return pro Start

[dannyguebueno]

You took a look at the template I put up with your code for 4 images.

[pushporani]

nice work... it's help me a lot..I was puzzled but your video works for me.

[HukMarta]

Hello, GeekLauch, very nice tutorial, I like it)
However, I've got problems with this part of the code:

for(var i = 0; i < imgs.length; i++) {
var b =
b.classList.add("bubl");
radio.appendChild(b);
bubbles.push(b);


b.addEventListener("click", function () {
currentImgIndex = i;
slideShow();
console.log(currentImgIndex);
})

}

When I click on the particular span, currentImgIndes = 7 (that's because I have my imgs.length = 7)...
So slider doesn't work correctly(( Maybe I'm doing sth wrong here? I'll be thankful for any help))

[TruCrypt]

very helpful, how can I make the image slider for images with different sizes fit perfectly

[TruCrypt]

Awsome video, Please help here ...How can you modify the javascript code so that when it gets an image with src=" " it just skips it without returning an empty slide

[milad]

Everything is working fine with my slideshow, although when for example I'm minimizing the page, I would like that the slideshow would do the same and scale itself in a way that it keeps it's proportion of between itself and the page.. how can I proceed?

[AsRammstein]

Ooo yeah...
I've been looking for this for a long time.
Thanks you!

[ryanthomas]

@GeekLaunch, I have followed the steps as you have provided and it's all working perfectly! thanks so much.

I now have an issue.

I have made this responsive, however when it goes to mobile view, I need to hide the buttons, prev&next, as well as the images and instead set a background color to the image-carousel div.

I have tried using display: none, display: hidden, and even uncommenting the code but it still shows the buttons, etc.

Please help

[milad]

Nice tutorial man! What changes do I have to do if I want the slideshow change images when not hovering over it.... and if I hover over the slideshow, the automatic slideshow should stop and be controlled by the next and prev buttons.

[olliphpsw]

Jacob, my code doesn't work. If I will copy it here, can you please have a look? I was trying many things...

[enormoz]

Great carousel! Thank you. Is there any way to make the images responsive? At the moment their width is fixed at 640px, right? I can't figure out how to make it work.

[fricco]

Great video, but why do you use linux? Is it any better than Windows?

[cksoft]

Dear geek,
Thank you very much for this tutorial. your carousel is wonderfull. but saddly it s not automaticaly reading. I tryed to do it but I failled. I'm a beginner... can you help me a little bit with that??? pleasssse?

[tommysuryajaya]

how to make that carousel sliding automaticly?