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!