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

```
Add This Code To Your Css File

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

```