Почему у меня есть дополнительная точка в моей карусели совы?

Question

У меня есть пара проблем с моей совой карусели. Один из них заключается в том, что он не реагирует на данный момент, но это еще одна проблема! На данный момент я продолжаю получать 3 точки, но должно быть только 2. Я хочу иметь 2 элемента в середине страницы (у меня максимальная ширина .owl-карусели установлена ​​на 500 пикселей). Вот моя разметка:

<div id="owl-cd" class="owl-carousel"> 
<div class="item"><img src=""></div> 
<div class="item"><img src=""></div> 
<div class="item"><img src=""></div> 
</div> 

Вот мой заказ CSS:

#owl-cd .item img{ 
margin: 0 auto; 
display: block; 
padding: 0px 0px 10px 0px; 
} 

#owl-cd .item { 
padding: 0px 0px 0px 0px; 
color: #686974; 
border: 0; 
max-width: 100%; 
} 

И мой сценарий:

$(document).ready(function() { 
    $("#owl-cd").owlCarousel({ 
    items: 2, 
    dots: true, 
    margin: 20, 
    autoWidth:true, 
    center:false, 
    } 
); 
}); 

Извинения, если я не включил все необходимое, я очень новый к развитию. Просто попробуйте некоторые вещи, но не уверен, почему я получаю 3 точки вместо 2 и почему он не реагирует на данный момент!

Answer 1

Я исправил это, отделив класс сова-карусель и вставив его в отдельный идентификатор сова-cd div. Итак:

<div id="owl-cd"> 
<div class="owl-carousel"> 
<div class="item"><img src=""></div> 
<div class="item"><img src=""></div> 
<div class="item"><img src=""></div> 
</div> 
</div> 

Я также извлекал максимальную ширину от .owl-карусели в моем CSS и применил его к # совой-CD.