Owl Carousel does not work with RTL direction

Question

Owl carousel slider does not work with RTL. I am adding rtl: trueto the configuration. But this is not loading the slider. There is a slider and a navigation bar is displayed. But only the contents of the slider is not displayed. How can I fix this problem?

My code is 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 1

This solution worked for me

Add direction: ltr; a class-stage- .owl external to file owl.carousel.min.css follows

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