2014-11-30 1 views
2

나는 올빼미 회전 목마에 몇 가지 문제점이있다. 하나는 그 순간에 반응이 없지만 또 다른 문제입니다! 현재 나는 3 개의 도트를 계속 유지하고 있지만 2 개만 있어야합니다. 페이지 중간에 2 개의 항목이 있어야합니다 (500px로 설정된 .owl-carousel의 최대 너비가 있습니다).왜 올빼미 회전식 탐색 기능에 여분의 점이 있습니까?

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

사과, 나는 아주 새로운 오전 여기

<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입니다 : 여기 내 마크 업입니다 개발에. 몇 가지 일을 시도해 보았지만 왜 2 점이 아닌 3 점을 얻었는지, 왜 순간적으로 반응이 좋지 않은지에 대해 확신하지 못했습니다!

+0

나는 또한 owl css에서 다른 것을 변경했다 : .owl-carousel .owl-item { 위치 : relative; 최소 높이 : 1px; 최대 너비 : 240px; – Chris

+0

슬라이더가 완전히 똑똑하지 않은 것 같습니다. 'itemsMobile : [10000,2]'속성을 플러그인 초기화에 추가하십시오. 스크린이 10000보다 작을 때마다 2 개의 항목을 설정하도록 알려줍니다. – Chad

+0

응답 해 주셔서 감사합니다. 나는 그것을 시도했다. 그러나 그것은 아무것도하지 않고 있었던 것처럼 보인다..? – Chris

답변

1

나는 owl-carousel 클래스를 분리하여 별도의 owl-cd div id 안에 넣음으로써 이것을 고쳤다. 그래서 :

<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> 

나는 또한 내 CSS에 .owl 회전 목마에서 최대 폭을 제거하고 # 올빼미-CD에 적용했다.