Owl Carousel is not working with direction RTL

Question

The Owl Carousel slider is not working with RTL. I add rtl: true in the configuration. But it's not loading the slider. The slider space is there and navigation is showing. But only the slider content is not showing. How can I fix this problem?

My code is given below:

<div class="row" id="brand-slider">
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
</div>

<script>
    $("#brand-slider").owlCarousel({
        rtl: true,
        loop: true,
        items: 6,
        pagination: false,
        autoPlay: true,
        responsive: true
    });
</script>

Screech

Thank god, that issue waste my long time. Now i found the issue and fixed. Just add style "direction: ltr" to parent Id or class. In my case <div class="row" id="brand-slider" style="direction: ltr;"> – Screech

I think they need to specify it in their documentation :/ – Innerdirected

Answer 1

This solution worked for me

Add direction: ltr; to the the .owl-stage-outer class in the owl.carousel.min.css file , as following

.owl-stage-outer{
 position:relative;
 overflow:hidden;
 -webkit-transform:translate3d(0,0,0);
 direction: ltr;
}

Bedstraw

Answer 2

just add to your CSS

.owl-carousel{
 direction: ltr !important;
}

• other solutions will work but will make the carousel jumps as you drag it right or left

Spirelet

Answer 3

For make Owl-Carousel-Version-1 RTL follow these steps :

step-1 : add this codes to your css file

.owl-carousel .owl-item {
   float: right !important;
}

.owl-carousel .owl-wrapper-outer {
   direction: rtl !important;
}  

step-2 : open owl.carousel.js then search transform and replace this lines

"-webkit-transform": "translate3D(" + pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"transform": "translate3d(" + pixels + "px, 0px,0px)"

to this (we have to change pixel to -pixel) :

"-webkit-transform": "translate3D(" + -pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"transform": "translate3d(" + -pixels + "px, 0px,0px)"

Owl-Carousel-Version-2 already has this feature.

Moskow

Answer 4

Add This Code To Your Css File

.owl-carousel .owl-item,
.owl-wrapper {
    float: right;
}

Arlana

Answer 5

Find this code translate3d("+b+"px,0px,0px) in owl.carousel.min.js and change it to this code translate3d("+(-b)+"px,0px,0px).

Wist

Answer 6

In the owl.carousel.js file

search for transform you should find something like this

transform: 'translate3d("+b+"px,0px,0px)'

see this "+b+" replace it with "+-b+" it ends up like this

transform: "translate3d(" + -b + "px,0px, 0px)"

Notes this will not work in ltr versions so in my case I am using dynamic application so made 2 files and I called the english version without minus " + b + " and the rtl I added this minus.

it may help someone.

Ellison

Answer 7

I noticed there is an option for owl slider

$('.owl-carousel').owlCarousel({
    rtl:true,

So you can use that and it will solve the issue.

Lucas

Answer 8

Upadet your owl carousal version, use owl carousel 2 or update your js and css file.Then use rtl:true,

Earpiercing

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Hui

Answer 9

no one of above answers are correct solution! first, change rtl: false to rtl: true in line 205 of file owl.carousel.js then change rtl:!1 to rtl:1 in file owl.carousel.min.js , that's it the problem will be solved basically

Abessive