Vertical carousel swiping up and down instead of right and left

Hello again,

I have a carousel that scrolls vertically but if I want to scroll to the next picture I have to swipe horizontally or touch the < > buttons that I have in the screen. Would it be possible to scroll to the next picture swiping up and down instead of right and left ? I’m using this effect with the XS viewport and I’d like to achieve the same effect that a gallery of pictures but using a carousel instead of a gallery.

Thanks a lot.

Changing the direction of the images is easily done with CSS (I did a YouTube tutorial on that) and no doubt that’s what you have at the moment.

implementing vertical swipe requires JavaScript to create the behaviour as I understand it. I’ve never done it.

Vertical swipe is probably not the best for smaller breakpoints, you could trap a user on the carousel :grin:

1 Like

I would set the carousel to autoplay and add data-bs-pause='false' to it so it won’t pause on hover.
Just my 2 cents before my morning :coffee:.

A vertical scroll on smaller breakpoints would make me, as your website visitor, click away.

1 Like

Or if using Bootstrap 4 then data-pause :grin:

That’s sooooo 2018 :nerd_face:

There can be reasons people are still on it.

Thank you @Jerry and @PeteSharp for the fast answer but I probably haven’t explained exactly what I wanted.

I’m in the XS breakpoint (only). I have a carousel that slides vertically. It woks like a charm with the help of @PeteSharp’s video.

What I wanted to achieve is, if the user wants to scroll from one image to another, instead of having to push the < and > buttons that there are on the left and right of the page, swipe the screen up and down.

I don’t understand why @Jerry doesn’t like it. In fact, this is the way that you move up and down on a page if you use your cell phone. Maybe you never use a cell phone to visit websites but I do and I think that many people do it too.

Thanks a lot.

I don’t think it’s a question of @Jerry not liking it - It can be annoying for users. It’s also one of my pet peeves when visiting a site that uses vertical carousels. There is nothing more annoying than attempting to scroll a page only to find that an image carousel is scrolling instead. To me, it’s all about making the page user and device-friendly, rather than showing what is possible in web design.

2 Likes

@hendon52 for president! :grin:

1 Like

Thank you for your answer yet I don’t understand why you’re saying this. My website deals with photography and my home page is just a carousel and a menu at the top of the page that allows you to visit several galleries, blog, about, … If this page is just a carousel don’t you think it’s more ‘natural’ to navigate swiping up and down instead of right and left ? This is the way we usually scroll up and down with a mobile device so I thought it would be user-friendlier scrolling this way. I don’t want to use a gallery of images in my home page, I want a carousel and as I mentioned before, the page is just a carousel, nothing else.

Thanks a lot.