Slick: vertical:true and vertical mouse scroll

[carlosrberto]

when I set vertical:true, vertical mouse scroll doesn't work, the slide scroll vertically but only if mouse scroll horizontal

[simeydotme]

do you mean "_drag_" ? - it's a feature with contention;

This is feature that has been purposefully left out of the library with the reason being that vertical swiping on a carousel would make scrolling the page impossible.

• #555
• #620
• #654
• #627
• #671
• #730
• #856
• #925
• #949
• #1030
• #1111
• #1171
• #1173

looking at it, seems to be roughly 2 issues a month logged for this... I personally was in favor of the option as long as it's clearly noted in the documentation that vertical scrolling can cause insane usability issues. @kenwheeler rightly states this in almost every reply and you can completely ruin a website with the function if you're not careful.

It's possible to have a carousel which takes up a small portion of real-estate or only set to vertical on large screens... (as is my scenario) and you could negate any problems.

I think the old saying applies here:

"The first time someone calls you a donkey you ignore them, the second time; have a think about it... but the third time someone calls you a donkey, well then perhaps it's time to go shopping for a saddle."

:smile:

Just my tuppence, but I'm gonna close this issue as I know what Ken's response will be, anyway :wink:

[gborbonus]

I'm not sure that really applies.

Scenario 1: The scroller is full width, and can take up the entire webpage.
The scollability of the website will only be affected in Mobile case usage, but slick has responsive design built in to compensate for that.

Scenario 2: The scroller is the full page. Not really an issue as the scroller IS THE FULL PAGE.

Scenario 3: The scroller is only part of the webpage, in which case the vertical scroll event only exists in the space that scroller does, the making it not a problem.

Well, I don't really care about the response, I can code it out anyway. Just wanted to add my 2 cents.

[simeydotme]

hey @gborbonus :) If you can modify the slick prototypes to enable the vertical scrolling and then post the code here it would really help all the people who created the issues raised above... I will try to keep this updated and redirect everyone who creates a vertical scroll issue to here, so you'd be doing a favor for them all. ^_^;

Best, Simon.

[kenwheeler]

You know what. I'm tired of this. Slick 1.5, vertical swiping, its happening.

[simeydotme]

:+1: haha sorry, Bro!

[gborbonus]

Behind you 100%. you will make the rest of us VERY happy.

[kenwheeler]

Now available on master using the verticalScrolling: true option

[mhulse]

verticalScrolling: true

Thank you for this!

I'm working on a Kiosk, and the scrollable area is a small portion of screen. Slick Carousel has been a life saver!!! :octocat: Many thanks for this feature addition. :smiley:

[Grawl]

@kenwheeler in last version, it's not available anymore. What version are you using in 2015?

[keremcankaya0]

After an hour of waste due to inertia and vertical options, here is the code

HTML

<div class="container-fluid" style="height: 3000px">

    <div class="row">
        <div class="your-class js-listen-gestures">
            <div style="height: 600px;" class="bg-danger slide" ><h3>1</h3></div>
            <div style="height: 600px;" class="bg-danger slide" ><h3>2</h3></div>
            <div style="height: 600px;" class="bg-danger slide" ><h3>3</h3></div>
        </div>
    </div>


</div>

JS

$(function () {
    var SLIDER = (function () {

        var slider = {};

        slider.build = function ($selector) {

            var $currentSlider = $selector.slick({
                vertical: true,
                verticalSwiping: true,
                infinite: false,
                dots: true
            });

            //https://github.com/Promo/wheel-indicator
            // Indicates when user makes swipe gesture on a trackpad or mouse wheel.
            //And prevents inertia
            new WheelIndicator({
                //Zone to attach event listeners
                elem: document.querySelector('.js-listen-gestures'),
                callback: function (e) {
                    //Checking if last slide
                    if ($currentSlider.slick('slickCurrentSlide') == $currentSlider.find('.slide').length - 1) {
                        //Prevents mouse to let user slide down
                        this.setOptions({
                            preventMouse: false
                        });
                    }else{
                        this.setOptions({
                            preventMouse: true
                        });
                    }

                    //Slide direction
                    e.direction === 'up' ? $currentSlider.slick('slickPrev') : $currentSlider.slick('slickNext');

                }

            });

        };

        return slider;

    }());

    SLIDER.build($('.your-class'));
});

[Grawl]

@keremcankaya0 this plugin works bad in Safari 10.1.2 😞

[Grawl]

So, here's my simple solution: https://codepen.io/Grawl/pen/mMLQQb

Tested in Chrome, Safari 10, Firefox, Opera.

[keremcankaya0]

@Grawl I have Safari 10.1.1 it works great, i'll test against 10.1.2. Your solution is not solving inertia which is causing trackpad to scroll twice.

[Grawl]

@keremcankaya0 I know about inertia problem and it's hard to solve I think.

[phellipelins]

@Grawl @keremcankaya0
Changing delta conditional to require more intense scroll to exec slickPrev and slickNext methods solve the problem.

https://codepen.io/Grawl/pen/mMLQQb

if(delta < -200) {
  $slider.slick('slickPrev')
}
else if(delta > 200) {
  $slider.slick('slickNext')
}

[Grawl]

@phellipelins works bad for me. Apparently we want to recognise a swipe from touch input device, not "mouse wheel" scroll events.