2014-09-10 2 views
2

페이지가로드 될 때 클래스를 현재 항목으로 변경해야합니다. 현재 항목에 자막을 표시하고 있습니다. 여기OWL 회전식 캐 러셀 2 : 페이지가로드 될 때 현재 항목

$(document).ready(function() { 

    $('#slider').on('change.owl.carousel changed.owl.carousel', function(e) { 
     if (e.property.name != 'position') return; 

     var current = e.relatedTarget.current() 
     var items = $(this).find('.owl-stage').children() 
     var add = e.type == 'changed' 

     items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add) 
    }); 

    $('#slider').owlCarousel({   

     items : 2,   
     nav: true, 
     loop: true,   
    }); 
}) 

작업 예제 : 다음은 코드입니다 http://jsfiddle.net/kurtko/1qdurrLz/16/

이 코드는 잘 작동 할 때 회전 목마 변경하지만 e.relatedTarget.current()가 null이 있기 때문에 페이지가로드 될 때 실패

모든 아이디어?

감사합니다.

답변

6

당신은이에 대한 initialized 이벤트를 사용해야합니다 :

$(document).ready(function() { 
    $('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) { 
     if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return 

     var current = e.relatedTarget.current() 
     var items = $(this).find('.owl-stage').children() 
     var add = e.type == 'changed' || e.type == 'initialized' 

     items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add) 
    }).owlCarousel({ 
     items : 2,   
     nav: true, 
     loop: true,   
    }); 
}); 

http://jsfiddle.net/1qdurrLz/18/를 참조하십시오.

+0

Perfect !! 감사!! – kurtko

+0

질문에 답변하는 경우 올바른 것으로 표시하십시오. – witrin

+0

이 이벤트에 대한 문서는 어디에 있습니까? – atilkan