올빼미 회전 목마 2 : 현재 항목 발췌 또는 항목 세부 정보를 표시 할 수있는 방법이 있습니까?</p> <p><a href="https://i.stack.imgur.com/8rmYs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rmYs.png" alt="enter image description here"></a></p> <p>내가 매김에서 현재 항목 설명을 표시하려면 :

Question

내 목표는 다음과 같습니다 항목의 제목과 설명과 함께 회전 목마를 만드는 것입니다. Owl Carousel 2를 통해 가능합니까? 코드 위

$(function(){ 
     var itemClass = $('#owl-item-carousel'); 
     itemClass.on('initialized.owl.carousel', function(e){ 
     var idx = e.item.index; 
     $('.owl-item').removeClass('middle'); 
     $('.owl-item').removeClass('left'); 
     $('.owl-item').removeClass('right'); 
     $('.owl-item').removeClass('left-last'); 
     $('.owl-item').removeClass('right-last'); 
     $('.owl-item').eq(idx).addClass('middle'); 
     $('.owl-item').eq(idx-1).addClass('left'); 
     $('.owl-item').eq(idx+1).addClass('right'); 
     $('.owl-item').eq(idx-2).addClass('left-last'); 
     $('.owl-item').eq(idx+2).addClass('right-last'); 
    }); 
    $('#owl-item-carousel').owlCarousel({ 
     center: true, 
     items:5, 
     loop:true, 
     // margin:10, 
     pagination: true 
    }); 

    itemClass.on('translate.owl.carousel', function(e){ 
     idx = e.item.index; 
     $('.owl-item').removeClass('middle'); 
     $('.owl-item').removeClass('left'); 
     $('.owl-item').removeClass('right'); 
     $('.owl-item').removeClass('left-last'); 
     $('.owl-item').removeClass('right-last'); 
     $('.owl-item').eq(idx).addClass('middle'); 
     $('.owl-item').eq(idx-1).addClass('left'); 
     $('.owl-item').eq(idx+1).addClass('right'); 
     $('.owl-item').eq(idx-2).addClass('left-last'); 
     $('.owl-item').eq(idx+2).addClass('right-last'); 
    }); 
}); 

만 추가하고 항목에서 클래스를 제거하기위한 것입니다 :

여기 내 코드입니다. 그러나 페이지 매김 아래에 현재 항목 설명을 표시하려면 어떻게해야합니까?

Answer 1

이벤트에 제목을 붙여서 해당 제목을 함수로 업데이트 할 수 있습니다. 예를 들어, 그래서 당신은 할 수 :

내 태그는 다음과 같이 할 것이다 :

<div class="owl-item" data-title="Title-01" data-action="updateTitle"></div> 

그리고 내 JS의 모습이

var $item = $('[data-action=updateTitle]'); 
$item.bind("click", function(){ 
    let $this = $(this), 
     $dataTitle = $this.data('title'), 
     $title = $("#owl-title"); 

    $title.text($dataTitle) 
})