Slick: Reverse Autoplay Direction

[greaveselliott]

Is there a way to reverse the slides autoplay direction?

[simeydotme]

change RTL property? :) (but you might have to move arrows around, then...)

[greaveselliott]

I tried this, but the slider has major display errors when set to RTL.

[simeydotme]

hmm, in that case, the answer is: No. so I think it's a valid feature request, you can find out how to request a feature in the contributing.md file. :)

[simeydotme]

Oh, and if you can provide a JSFiddle showing the "major display issues" it would really help us fix them :)

[greaveselliott]

Apologies for my “major display issue” description - thinking about the bug now - its most likely a conflict with external scripts/styles. Unfortunately I can’t copy paste the project because it can’t go live just yet, If you give me you email address, I’m happy to share you a temporary link to the project on my virtual server?

Cheers,

• Elliott

On 25 Mar 2015, at 02:25, Simon Goellner [email protected] wrote:

Oh, and if you can provide a JSFiddle showing the "major display issues" it would really help us fix them :)

—
Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/1163#issuecomment-85790017.

[pipeTM]

Set slidesToScroll to -1

[mazzaker]

"Set slidesToScroll to -1"
did not work for me, but with rtl and dir="rtl" direct on the slider it work well - just have to add a float: left to the slide content because i have 3 sliders with images and only the 2nd one with rtl.

[greaveselliott]

I never did find a solution to this one.

On 20 Oct 2015, at 11:53, mazzaker [email protected] wrote:

"Set slidesToScroll to -1"
did not work for me, but with rtl and dir="rtl" direct on the slider it work well - just have to add a float: left to the slide content because i have 3 sliders with images and only the 2nd one with rtl.

—
Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/1163#issuecomment-149522985.

[DaveData]

Same for me, slidesToScroll: -1, rtlnothing worked, so I did it by hand. This also pauses play on hover.

var autoplaySpeed = 2000;
var autoplayOn    = true;

var $slickRoot = $('#your-selector');

$slickRoot.on('init', function() {
    var $slickList = $slickRoot.find('.slick-list');

    $slickList.mouseenter(function() {
        autoplayOn = false;
    });
    $slickList.mouseleave(function() {
        autoplayOn = true;
    });

    window.setInterval(function() {
        if (!autoplayOn) return;
        $slickRoot.slick('slickPrev');
    }, autoplaySpeed);
});

$slickRoot.slick({
    infinite: true,
    autoplay: false
    // ...
});

[mazzaker]

Here is my solution. As mentioned there are three sliders all of them display user pictures with an overlay on hover/on mobile.

js:

$(document).ready(function() {
    var sliderRandom = $('.slider-random');
    var sliderOnline = $('.slider-online');
    sliderOnline.attr('dir', 'rtl');
    var sliderVisits = $('.slider-visits');
    // next line I needed for my responsive layout: calculate the maxItems by parents width
    var maxItems = Math.round(sliderRandom.parent('div').width() / 195);
    sliderRandom.slick({
        lazyLoad: 'ondemand',
        slidesToShow: maxItems,
        slidesToScroll: 1,
        swipeToSlide: true,
        centerMode: false,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
    });
    sliderOnline.slick({
        lazyLoad: 'ondemand',
        slidesToShow: maxItems,
        slidesToScroll: 1,
        rtl: true,
        swipeToSlide: true,
        centerMode: false,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
    });
    sliderVisits.slick({
        lazyLoad: 'ondemand',
        slidesToShow: maxItems,
        slidesToScroll: 1,
        swipeToSlide: true,
        centerMode: false,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
    });
});

HTML:

    <div class="columns small-12">
        <h2 class="title">My title</h2>
        <div class="gallery rows-1 slider-online">
            <div class="slick-slide">
                <div>
                    <a href="XXX" class="profile-link">
                        <img class="profile-image" data-lazy="xxx.jpg">
                        <div class="imageInfo" style="direction: ltr;">
                            <div>XXX,&nbsp;</div>
                            <div>41 Years,&nbsp;</div>
                            <div>County: Cornwall</div>
                        </div>
                    </a>
                </div>
                // next item
            </div>
        </div>
    </div>

CSS:
This one I need to change for scroll. Default is float right!

[dir='rtl'] .slick-slide {
    float: left;
}

[talbenbasat]

+1

[engelfrost]

Does this demonstrate the same issue? http://jsfiddle.net/3mak6rv5/1/

[mazzaker]

No only a missing css/attribute:
dir="rtl"
or
direction: rtl;

[leggomuhgreggo]

Hey I know this is months later, but I'm sorting through old issues. Are people still having this issue? RTL seems to be working on the demo page. Make sure you're using dir="rtl"

Gonna close, but if you anyone thinks there's still a bug and want to circle back with a fresh test case, please feel free. Thanks!

[fayazrehmani]

engelfrost js fiddle is the same issue I am facing when i add dir: rtl. In Ltr the slider seems to be working excellent. leggomuhgreggo kindly help me out as I have used slick on some site and its in development.
Would really appreciate ur help.
When I turn infinite false my first slide or first chuck if slidesToShow is set to 5 will display. the slider moves in ltr direction & slides are all in rtl still.

[sbcmeg]

I'm still having this issue, tried using the dir: rtl, with the same setup on the demos. I've also tried the slidesToScroll to -1 and I'm still having the issues.

[cmy868]

Just find a way that you don't have to do with rtl! ( rtl for me also not works...

In slick.js, find 'Slick.prototype.autoPlayIterator = function()'

Change '+' to '-' in the 'slideTo = _.currentSlide + _.options.slidesToScroll;'

This works for me!