Почему не работает owlCarousel?

Question

[Wind2211]

Добрый день. Сайт potolki.don-web-master.ru не работает галерея owlcarousel. По классам вроде как правильно прописано
Скрипт

$('div .owl-carousel.owl-theme.owl-loaded').owlCarousel({
    margin:10,
    loop:true,
    autoWidth:true,
    nav:true
});

Картинка загружается буквально на мгновение, потом отображаются только стрелки навигации, причем по 2 на каждое изображение.
В чем может проблема быть?

Answer 1

[Айнур Валиев]

.owl-carousel.owl-theme.owl-loaded добавляются плагином впоследствии, они по идее зарезервированные. навешивай на другие классы или лучше id

Comments

[Wind2211]

Верстка сейчас такая

<div id="carouselown" class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
          <div class="owl-stage">
	[[getImageList?
    &tvname=`resourcealbum`
    &docid=`1`
    &tpl=`slider_items`
    ]]
         </div>
     </div> 
      <div class="owl-nav">
         <div class="owl-prev">prev</div>
         <div class="owl-next">next</div>
      </div>
 </div>

Попробовал скрипт вызвать по id. результат тот же

[Айнур Валиев]

много лишнего. убери классы owl-stage-outer owl-carousel owl-theme owl-loaded, а также навигацию. Должно быть примерно так

<link href="assets/css/owl.carousel.css" rel="stylesheet" />
<script src="assets/js/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        //тут нужные опции
    });
});
</script>

<div class="liders">
    <h3>Лидеры продаж</h3>
    <hr style="height:2px;">
    <div class="owl-carousel">
        [[!pdoPage?
        &element=`msProducts`
        &tpl=`tpl.msProducts.row2`
        &limit=`10`
        &parents=`8`
        &resources=`277,543,332,333`
        &sortby=``
        ]] 
    </div>
</div>