How do I disable the sliding of a flexbox that is set to slides mode?

Ask the community
, , ,
1

I have a flexbox set to slide mode because I need navigation buttons. I am using a massive CMS dataset that will grow and need this to work.

I know what you’re already going to ask, just use a repeater. Repeaters are too limiting.

I have a set number of items in the flexbox, each holding two elements which do not work with repeaters - 1. a video with an alpha channel ie: webms. 2: a widget.

This means I can only use a flexbox - and it must slide, since it’s beyond a clipping mask and slides behind it. My elements outside the flexbox are dynamic - with code they all update and cycle through the index of items without any part of the flexbox connected to the dataset at all.

Heres the problem - you cant disable sliding on hover on either the slider flexbox or the “slides” one that you can use navigation buttons with. So, when people hover or slide left and right on the flexbox, the index does not update the dynamic items and breaks the sync - so easy fix - disable sliding and only use navigation buttons to keep the sync.

Another kicker - we cant disable hover interactions on the flexbox - when the user hovers over the item it must remain hoverable for tooltips and clickable to its own details page. so - whats the solution here? Let me lock this slider down!!!

2

Since you’re using Wix Studio, you’ll have access to CSS.

Tested it quickly, and the following seems to remove the scroll via mouse, but keeps the buttons working:

.my-custom-flexbox {
  overflow: hidden;  /* This prevents manual scrolling/swiping */
  
  /* Optional: Prevents touch-scrolling on mobile specifically */
  touch-action: none; 
}

.my-custom-flexbox > * {
    overflow-x: hidden !important;
    scroll-snap-type: none !important; /* Disables the "snapping" behavior */
    touch-action: pan-y; /* Allows vertical scrolling but blocks horizontal touch sliding */

You’ll need to change the class to what makes the most sense for you, and then apply to the custom class to the flexbox.

Also worth double checking this is accessible and works across devices - but should get you on the way :slight_smile:

3

Have tried the overflow method and it doesn’t kill the scroll on trackpads. Tried putting it in the body - end too.

However I found the solution! :head_shaking_vertically:

While trying other routes I ran into another issue, since we’re using tons of transparent videos with a widget for each slide we NEED “lazy loading” looks like flexboxes can’t do asynchronous loading by item since its seen as 1 item, so…after fiddling and tinkering I just threw out the entire idea of using any flexboxes or repeaters or templates and made a slide show from scratch that functions like a flexbox with the benefits of lazy loading like a repeater would.

Just set your items after 1 to “Hidden & Collapsed.” Create a container for each slide and stack them in the exact same place with 1 on top and the rest under.

Also if you have a ton of slides just set an array instead of naming them 1 by 1.

Take a look, the only 2 issues im seeing with this version is spam clicking the navigation buttons can sometimes make the animation look like its “stacking” rather than sliding, and items are sometimes slow to load - but working on testing with smaller AVIFs or another alpha channel format thats smaller than webm…not many options.

I combined this with a looping nav button tied to index listening and it works perfectly plus now I don’t need a clipping mask and can just use a css grid where I want the slides to appear.

Any ideas to help improve performance and get a lock check in to absolutely 100% sync the index to not update until the animation finishes? - could cause issues down the line!

$w.onReady(function () {
    let slides = ['#slide1', '#slide2', '#slide3'];
    let currentIndex = 0;
    
    // Expand first slide
    $w('#slide1').expand();
    
    $w('#nextButton').onClick(() => {
        let oldIndex = currentIndex;
        let nextIndex = (currentIndex + 1) % slides.length;
        
        // Expand next slide first
        $w(slides[nextIndex]).expand();
        
        setTimeout(() => {
            $w(slides[oldIndex]).hide('slide', {direction: 'left', duration: 400})
                .then(() => {
                    // Collapse the OLD slide after it's hidden
                    $w(slides[oldIndex]).collapse();
                });
            $w(slides[nextIndex]).show('slide', {direction: 'right', duration: 400});
        }, 100);
        
        currentIndex = nextIndex;
    });
    
    $w('#prevButton').onClick(() => {
        let oldIndex = currentIndex;
        let prevIndex = (currentIndex - 1 + slides.length) % slides.length;
        
        // Expand prev slide first
        $w(slides[prevIndex]).expand();
        
        setTimeout(() => {
            $w(slides[oldIndex]).hide('slide', {direction: 'right', duration: 400})
                .then(() => {
                    // Collapse the OLD slide after it's hidden
                    $w(slides[oldIndex]).collapse();
                });
            $w(slides[prevIndex]).show('slide', {direction: 'left', duration: 400});
        }, 100);
        
        currentIndex = prevIndex;
    });
});