title: Owl Carousel is not working with direction RTL
body: <p>The Owl Carousel slider is not working with RTL. I add <code>rtl: true</code> 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?</p>
  
  <p>My code is given below:</p>
  
  <pre><code>&lt;div class="row" id="brand-slider"&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
          &lt;img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
          &lt;img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
          &lt;img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
          &lt;img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $("#brand-slider").owlCarousel({
          rtl: true,
          loop: true,
          items: 6,
          pagination: false,
          autoPlay: true,
          responsive: true
      });
  &lt;/script&gt;
  </code></pre>