CODEWITHSUNDEEP
javascriptjquerycarousel
benc
benc

Reputation: 2018

Slick carousel right to left

I've setup slick carousel to continuously scroll, however I need to to scroll in the oposite direction. Adding the RTL option didn't seem to work.

Fiddle here (currently left to right)

http://jsfiddle.net/mth2ghod/

 $(function(){
    $('.slider').slick({

        speed: 10000,
        autoplay: true,
        autoplaySpeed: 100,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true

    });
});

Upvotes: 13

Views: 76392

Answers (11)

Richard Hindle
Richard Hindle

Reputation: 21

None of these worked for me, slidesToScroll: -1 and rtl: true just killed the carousel. But then Karl Maw pointed out the simplest solution:
Just use CSS to flip the carousel 180 and its content another 180.

.carousel {
    transform: rotate(180deg);
}

.carousel__item {
    transform: rotate(180deg);
}

Upvotes: 2

manoj
manoj

Reputation: 187

If you want Slick carousel right to left then Remove the dir="rtl" from slick slider main div and also remove rtl: true from the jquery part.

dir="rtl" /* Remove from slick slider div
rtl: true  /* Remove line from slick slider jquery

For Example:

https://codepen.io/davecar21/pen/RwovWvB

Upvotes: 0

Paul Anigbo
Paul Anigbo

Reputation: 1

adding [dir="ltr"] to the slider container and also adding [rtl: false] to slick slider settings fixed the issue for me.

Example code:

this.$hero.slick({
      accessibility: true,
      arrows: false, // this theme has custom arrows
      draggable: false,
      dots:true,
      fade: false,
      rtl: false,
      autoplay: this.$hero.data('autoplay'),
      autoplaySpeed: this.$hero.data('speed')
    }).slickAnimation();

Upvotes: 0

Ved Prakash N
Ved Prakash N

Reputation: 21

Slick Carousel RTL and LTR

Example: English (LTR) and Arabic (RTL)

Slick Carousel for RTL:

$(".slider-nav").slick({
    arrows: false,
    fade: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    rtl: true
});

Slick Carousel for LTR:

$(".slider-nav").slick({
    arrows: false,
    fade: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    rtl: false //not mandetory in LTR
});

Upvotes: 0

davecar21
davecar21

Reputation: 2674

This works for me,

I add ( dir="rtl" ) to the slider container and then add ( rtl: true ) to the slick slider settings

$('.carousel-rtl').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    arrow: true,
    dots: true,
    rtl: true,
  });
<div class="wrapper">
  <div class="slide-wrapper">
    <h2>Slick with RTL<h2>
    <div class="carousel-rtl" dir="rtl">
      <p>0</p>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </div>
  </div>
</div>

You can see the sample here https://codepen.io/davecar21/pen/RwovWvB

Upvotes: 2

Hossein Hashemi
Hossein Hashemi

Reputation: 150

According to the Slick GitHub page the bug fix is the below CSS code:

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

and

.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}

https://github.com/kenwheeler/slick/issues/2968#issuecomment-1143535266

Upvotes: 0

Bilal Talal
Bilal Talal

Reputation: 71

in your rtl css add below without any edit on

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

Upvotes: 7

Boy Mark
Boy Mark

Reputation: 191

Setup "slidesToScroll" property to a negative value (e.g slidesToScroll: -1,) is not a native solution. This produced images smooth flow problem.

The right way is to add an attribute dir="ltr" to the slider's container (HTML element) OR add rtl: false property to slider settings:

// add an attribute dir="ltr" to the slider's container
//$('.slider').attr('dir', 'ltr');

// OR add `rtl: false` property to slider settings

$('.slider').slick({
  autoplay: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  rtl: false
});

Note: This will reverse text direction also which can be changed by the CSS direction: ltr;

JS Fiddle Example

Upvotes: 19

Juandres Yepes Narvaez
Juandres Yepes Narvaez

Reputation: 163

know this is old, but the slick docs says:

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

Upvotes: 2

Rijo
Rijo

Reputation: 2718

Here is the example for vertical slider from top to bottom.

http://jsfiddle.net/mth2ghod/114/

$(function(){
$('.slider').slick({

    speed: 5000,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    slidesToShow: 1,
    slidesToScroll: -1,
    vertical: true

});
});

Upvotes: 0

Bob Tate
Bob Tate

Reputation: 1381

Change the slidesToScroll to a -1 (it will change the slide direction)

 $(function(){
    $('.slider').slick({
       speed: 10000,
       autoplay: true,
       autoplaySpeed: 100,
       cssEase: 'linear',
       slidesToShow: 1,
       slidesToScroll: -1,
       variableWidth: true

    });
});

Upvotes: 13

Related Questions