owl carousel not work with bootstrap RTL 3( Arabic)

Question

I added owl carousel in my project with bootstrap 3 arabic like this

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="owl-carousel">
                <img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina">
                <img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina">
                <!-- other images -->
            </div>
        </div>
    </div>
</div>

JS

$('.owl-carousel').owlCarousel({
    items: 4,
    lazyLoad: true,
    loop: true,
    margin: 10
});

But owl carousel does NOT work with Arabic bootstrap and does NOT show any image.
How can I fix this problem ?

fiddle DEMO

Answer 1

add option - rtl:true

http://www.owlcarousel.owlgraphic.com/demos/rtl.html

http://jsfiddle.net/soledar10/6ef5p1u1/18/

$('.owl-carousel').owlCarousel({
  items: 4,
  lazyLoad: true,
  loop: true,
  margin: 10,
  rtl: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="http://servu.besaba.com/bootstrap-rtl.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="owl-carousel">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
        <img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
      </div>
    </div>
  </div>
</div>