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>

Solution 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;
}

Solution 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

Solution 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.

Comments

[Rayees Pk]

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;">