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>

```

Answer: 
**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.**
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.