点击的项目应位于猫头鹰旋转木马的中心位置

$(".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事件 。 此事件导致猫头鹰转盘移动到特定位置。

2. 我在初始化轮播之前为轮播内的每个div设置了data-position属性。 然后我使用此属性作为to.owl.carousel事件的参数。

请检查结果： https ： //codepen.io/glebkema/details/dWXzza/

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