올빼미 회전 목마 2 기본 정보를 검색하는 방법

Question

올빼미 회전 목마 2 jquery 슬라이더를 사용하고 있으며 몇 가지 기본 정보를 검색하려고합니다. 특히 위 단락 태그의 현재 슬라이드 번호를 표시하고 싶습니다. "currentSlide"클래스의 슬라이더. 여기

내 마크 업입니다 :

<p class="currentSlide"></p> 

<div id="slider" class="owl-carousel"> 
    <div class="item"><h3>Slider 1</h3></div> 
    <div class="item"><h3>Slider 2</h3></div> 
    <div class="item"><h3>Slider 3</h3></div> 
    <div class="item"><h3>Slider 4</h3></div> 
    <div class="item"><h3>Slider 5</h3></div> 
    <div class="item"><h3>Slider 6</h3></div> 
</div> 

그리고 여기 내 자바 스크립트입니다 :

정보 :는 "정보"옵션을 추가하는 방법에 대한이 말한다 문서에서

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.owl-carousel').owlCarousel({ 
     items: 3, 
     center : true, 
     loop : true, 
     //info: ??Function?? 
    }); 
}); 
</script> 

유형 : 기능

기본값 : false

기본 정보 (현재 항목/페이지/너비)를 검색하는 콜백. Info 함수의 두 번째 매개 변수는 Owl DOM 객체 참조입니다.

jquery의 전체적인 초보자인데이 "정보"기능에 대한 도움이 필요합니다. 당신은 단순히 translated.owl.carousel 작업에 가장 잘 할 수있다 ... 일부 이벤트 콜백을 추가 할 필요가, 따라서 (see: Docs/Events/Data)

: 이벤트 콜백에 전달 된 객체

Answer 1

사전에

덕분에 당신이 필요로하는 모든 정보를 가지고 너의 상황에서.

var owl = $('.owl-carousel'); 
owl.owlCarousel(); 

owl.on('translated.owl.carousel', function(event) { 
    $('.currentSlide').text(event.item.index); 
}); 

... initialized.owl.carousel 콜백을 추가 할 수 있습니다.

Answer 2

솔루션 여기에서 가져온 것입니다 http://www.jq22.com/demo/OwlCarousel2/demos/info.html

사용 "정보 : 된 getInfo"는, 다음 함수는 모든 매개 변수를 나열합니다, 그래서 그냥 하나를 선택합니다

function getInfo(i){ 
    var owlInfo = i,prop,value,name; 
    for(prop in owlInfo){ 
    if(owlInfo.hasOwnProperty(prop)){ 
     value = owlInfo[prop]; 
     name = prop; 
     $('.'+name).text(value); 
    } 
    } 
}