Image Carousel - would love some feedback and help (JavaScript project)

Hi all!

I needed an image carousel so I thought I’d give it a go and make one in JavaScript, which I’m very new to but in the process of learning.

Right now the features are:

  • you can have several carousels!
  • auto-plays but goes inactive when user is hovering, and remains inactive for some time after unhovered

The issues I see and improvements I’d like are:

  • Swiping support on mobile devices. [Edit: this is now implemented!]
  • Better responsiveness in terms of size. I think this is the biggest issue: right now you need to set the carousel’s size explicitly. You can use relative units like vh to get some responsiveness, but I wonder if I can rework it so that the carousel adapts to its container? I tried to control its size with percentages, but I didn’t get that working.

I’m all ears to any other suggestions or if you find any bugs!

Here is the link:

Edit 2: updated link again with new features!

1 Like

Hello friend!

I like your carousel - I’ve actually built a few webpages for money but I’ve never done a carousel myself) Nice job!

Some thoughts:

  1. Why does it go backward when carousel reaches the last element? That’s a bit confusing :face_with_raised_eyebrow:
  2. You could probably add some captions underneath.

Hope it helps :wink:

1 Like

Hi @dhen !

Thanks! :slight_smile:

I agree, having it go backwards was strange - I’ve fixed that and it now loops around!

I’ll see what I can do about captions :slight_smile:

Bumping my own post if that’s all right!

The code is a bit of a mess and can for sure be tidied up, but I managed to finally implement swiping! It might still be a bit janky on mobile devices though.

If anyone wants to learn more about creating draggable objects, I highly recommend this tutorial by Kirupa:

Let me know if you find any bugs!