点击的项目应该在猫头鹰旋转木马的中心。

Question

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

上面是我的猫头鹰旋转木马。现在我需要点击猫头鹰-项目应该是中心。请随便找我

Answer 1

1. 当用户单击该项时，可以触发 event。此事件将导致猫头鹰旋转木马移动到特定位置。
2. 在初始化旋转木马之前，我已经为旋转木马中的每个div设置了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="https://via.placeholder.com/400x300/f06/fff/?text=1" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/f63/fff/?text=2" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/fc3/fff/?text=3" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/693/fff/?text=4" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/3cc/fff/?text=5" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/369/fff/?text=6" alt=""></div>
    <div><img src="https://via.placeholder.com/400x300/936/fff/?text=7" alt=""></div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/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.3.4/owl.carousel.min.js"></script>

​