MiKaDo MiKaDo - 7 months ago 121
Javascript Question

owl carousel not work - display with bootstrap 3

I add 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" 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>


JS:

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


But owl carousel not work with arabic bootstrap and not show any image.

How do can i fix this problem ?!

DEMO : fiddle

Answer

add option - rtl:true

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

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

$('.owl-carousel').owlCarousel({
    items: 4,
    lazyLoad: true,
    loop: true,
    margin: 10,
    rtl:true
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<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>