点击的物品应位于猫头鹰旋转木马的中间

Question

$(".owl-carousel").owlCarousel({
    margin:10,
    dots:false,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

上面是我的猫头鹰旋转木马。现在，我需要单击的猫头鹰项目应该是中心。请任何我

Answer 1

用户单击该项目时，您可以触发
1. 事件。此事件导致猫头鹰旋转木马移至特定位置。

   在初始化旋转木马之前，我已经在旋转木马内部设置to.owl.carousel

   内部的

   data-position属性。然后，我将此属性用作
   div
事件的参数。

2. please检查结果：

   Https：//codepen.io/glebkema/details/dwxzza/

to.owl.carousel

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

$owl.children().each( function( index ) {
  $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
});

$owl.owlCarousel({
  center: true,
  loop: true,
  items: 5,
});

$(document).on('click', '.owl-item>div', function() {
  $owl.trigger('to.owl.carousel', $(this).data( 'position' ) ); 
});

.owl-item > div {
  cursor: pointer;
  margin: 9px 12px;
  transition: margin 0.4s ease;
}
.owl-item.center > div {
  cursor: auto;
  margin: 0;
}