点击的项目应位于owl carousel的中心

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事件,当用户点击了该项目.此事件导致猫头鹰转盘移动到特定位置.

2. 我在初始化轮播之前为旋转木马内的data-position每个设置了属性div.然后我使用此属性作为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;
}

<div class="container">
  <div class="owl-carousel">
    <div><img src="//placehold.it/400x300/f06/fff/?text=1" alt=""></div>
    <div><img src="//placehold.it/400x300/f63/fff/?text=2" alt=""></div>
    <div><img src="//placehold.it/400x300/fc3/fff/?text=3" alt=""></div>
    <div><img src="//placehold.it/400x300/693/fff/?text=4" alt=""></div>
    <div><img src="//placehold.it/400x300/3cc/fff/?text=5" alt=""></div>
    <div><img src="//placehold.it/400x300/369/fff/?text=6" alt=""></div>
    <div><img src="//placehold.it/400x300/936/fff/?text=7" alt=""></div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>