сова карусель не работает с начальной загрузки RTL 3 (араб)

Question

Я добавил owl carousel в моем проекте с bootstrap 3 arabic как этот

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

Но сова карусель НЕ работает с арабским бутстрапом и не показывает никакого изображения.
Как я могу исправить эту проблему? Опция

fiddle DEMO

Answer 1

добавить - 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>

Answer 2

Или может быть, вы можете установить AutoPlay: истинный

Чтобы сделать слайд-шоу изображений, есть много вариантов (плагинов), которые вы можете использовать:

• Bootstrap Carousel
• Использование Wowslider
• FlexSlider
• Coinslider

Detailed Technology Center

Answer 3

Дорогой друг, вы можете поместить следующий фрагмент кода вместо «owl.carousel.css», пока проблема не будет решена.

/* 
 
* \t Core Owl Carousel CSS File 
 
* \t v1.3.3 
 
*/ 
 

 
/* clearfix */ 
 
.owl-carousel .owl-wrapper:after { 
 
\t content: "."; 
 
\t display: block; 
 
\t clear: both; 
 
\t visibility: hidden; 
 
\t line-height: 0; 
 
\t height: 0; 
 
} 
 
/* display none until init */ 
 
.owl-carousel{ 
 
\t display: none; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t -ms-touch-action: pan-y; 
 
} 
 
.owl-carousel .owl-wrapper{ 
 
\t display: none; 
 
\t position: relative; 
 
\t -webkit-transform: translate3d(0px, 0px, 0px); 
 
\t float: left; 
 
} 
 
.owl-carousel .owl-wrapper-outer{ 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t width: 200%; 
 
} 
 
.owl-carousel .owl-wrapper-outer.autoHeight{ 
 
\t -webkit-transition: height 500ms ease-in-out; 
 
\t -moz-transition: height 500ms ease-in-out; 
 
\t -ms-transition: height 500ms ease-in-out; 
 
\t -o-transition: height 500ms ease-in-out; 
 
\t transition: height 500ms ease-in-out; 
 
} 
 
\t 
 
.owl-carousel .owl-item{ 
 
\t float: left; 
 
} 
 
.owl-controls .owl-page, 
 
.owl-controls .owl-buttons div{ 
 
\t cursor: pointer; 
 
} 
 
.owl-controls { 
 
\t -webkit-user-select: none; 
 
\t -khtml-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 
\t -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
} 
 

 
/* mouse grab icon */ 
 
.grabbing { 
 
    cursor:url(grabbing.png) 8 8, move; 
 
} 
 

 
/* fix */ 
 
.owl-carousel .owl-wrapper, 
 
.owl-carousel .owl-item{ 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t -ms-backface-visibility:  hidden; 
 
    -webkit-transform: translate3d(0,0,0); 
 
    -moz-transform: translate3d(0,0,0); 
 
    -ms-transform: translate3d(0,0,0); 
 
}

Answer 4

Это то, что решить эту проблему, применяя атрибут dir на div, который содержит элемент, который ваш Javascript будет работать на

HTML

<div class="col-sm-6" dir="ltr"> 
    <div class="owl-carousel"> 
     <!-- your html --> 
    </div> 
</div> 

и код javasc НИИИТ не должны быть изменены

Github issue

Answer 5

Вы можете просто заменить эти стили на owl.carousel.css

.owl-carousel .owl-wrapper{ 
    display: none; 
    position: relative; 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    float: left; 
} 
.owl-carousel .owl-item{ 
    float: left; 
}