horizontal scroll behaviour on carousel

[alasdair17]

hey @arminunruh

I'm working on a new site and the client would like a horizontal scroll using the mouse/trackpad. I've setup a carousel with 'mouse scroll' and is working fairly well. However, is it possible to disable left and right gestures on trackpads and just keep the up and down gestures to move the horizontal scroll? Often the left and right is making the website go back a page.

Also, this is just for desktop, the mobile won't have the carousel.

Cheers,

Alasdair

[alasdair17]

the nav/menu is also in the vertical position, is it possible to hide/fade away when you mouse scroll along the carousel?

[arminunruh]

hey @alasdair17
the "mouse scroll" of the carousel works like this:

your mouse is on the carousel
you scroll down
the carousel moves horizontally until it is at the end

then your page moves down, the normal scroll continues

as far as i know, there is no left and right scrolling inside of a carousel.
however, there can be click and drag left and right on a carousel with free drag enabled:

[arminunruh]

https://stackoverflow.com/questions/15829172/stop-chrome-back-forward-two-finger-swipe

it seems like you could maybe use this css:

html, body {
overscroll-behavior-x: none;
}

in that link, there are some other answers you can try,
like this js solution

<script>
document.addEventListener(
  'touchstart',
  this.handleTouchStart,
  {passive: false}
)
document.addEventListener(
  'touchmove',
  this.handleTouchMove,
  {passive: false}
)
</script>

[alasdair17]

thanks @arminunruh that css code works great for disabling the left and right gestures on trackpad.

Each page will have the carousel mouse scroll so there won't be any scrolling down. Do you have any tips or specific classes to look out for when editing the carousel css to size down the images/text to fit into tablets? I'm struggling with getting the images to fit within the tablet browser window not letting the text overlap. I've tried adjusting the "calc %" height in inspector but it seems to stretch the image.

My client is keen for this mouse scroll layout to work on tablets (mobile will be a standard vertical layout) so any tips would be helpful! thanks man

[arminunruh]

size down the images/text to fit into tablets?

choose fixed height in carousel options and give carousel a height of 100svh?
or 100dvh

not sure if you mean this

I'm struggling with getting the images to fit within the tablet browser window not letting the text overlap.

i dont know what text u mean do u have a link

My client is keen for this mouse scroll layout to work on tablets

how does it work on tablets?
can he scroll left and right on a tablet with "mouse scroll" enabled?

[alasdair17]

@arminunruh thanks armin. Will work on it some more and send a link. Yeah sorry mouse scroll wouldn't work on tablets, but I just tried it in the apple shop (don't have a tablet!) and is a little sticky when I swipe it. Maybe because mousescroll is on, i'm not sure. I think for what he wants using the full screen slider would just be easier, is not at all possible to have horizontal scroll on the FSL?

[arminunruh]

there is no horizontal scroll feature for lay theme, only swiping left and right for fullscreen slider or carousel mmh

do you need captions and numbers too?

[alasdair17]

@arminunruh ah yeah no worries.

yes to needing captions and numbers.

[arminunruh]

ok i will think about how to code this, maybe i can add a feature to the carousel to just have a horizontal scroll

[alasdair17]

@arminunruh thank you!

[arminunruh]

hey so

two things i thought about:

• on a windows pc, often people cant scroll horizontally, unless they have a horizontal scrollbar.

• why dont you use transition slide, and "free drag" option?
  thats like scrolling horizontally at least on a touchdevice. on a mac or pc you need to drag left and right instead
  

[arminunruh]

look, i coded the basic version of it:
https://capture.dropbox.com/nDFR4VaLjIBBuNal

however, i would still need to work on the other features to be compatible like:

• left and right buttons
• dots as navigation underneath
• click to navigate
• left/right cursors
• setting for gaps between images
• pause/play youtube/vimeo videos

i dont have much time for this at the moment.
not sure when i can do it

also: how will people even know they have to scroll horizontally?
you'd probably totally need either "dots as navigation underneath", or "left and right buttons" or "left/right cursors"

[alasdair17]

thanks @arminunruh! could you release an update or send me a version to try it out? I'm getting a lend of an ipad so I can test it on there too. I am seeing the client today and I will mention this to him.

[alasdair17]

hey @arminunruh really really sorry but I just spoke with my client and I explained to him the drawbacks of the horizontal scroll and we have decided to just go with a simple vertical layout, it makes more sense for what he needs so we won't be using the horizontal scroll or carousel. Sorry if I wasted your time. I hope the horizontal scroll on carousel will come in useful for something else.

[arminunruh]

ok

i think the horizontal scroll is a viable option if you also use dots as navigation below, or arrow buttons

[arminunruh]

hey if you update lay theme and carousel addon, you will now have the "horizontal scroll" as transition type when you edit a carousel.

also its now compatible with the other carousel settings:
left and right buttons
dots as navigation underneath
click to navigate
left/right cursors
setting for gaps between images
pause/play youtube/vimeo videos

compared to "sliding" transition type, the settings are much less

[alasdair17]

@arminunruh hey, thank you so much for working on this despite no longer requiring it for this website I am working on. Hopefully it will come in useful for another website. I hope I didn't take too much time away from you when you could have worked on something else.