单击的项目应位于猫头鹰轮播的中心 [英] The clicked item should be in center in owl carousel

问题描述

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

以上是我的猫头鹰轮播.现在，我需要单击owl-item应该居中.拜托我

The Above is my Owl carousel. Now i need clicked owl-item should be center. please any me

推荐答案

1. 您可以触发 to.owl.carousel事件(当用户单击该项目时).此事件导致猫头鹰轮播"移动到特定位置.

1. You can trigger the to.owl.carousel event when the user clicks on the item. This event causes the Owl Carousel to move to a specific position.

在初始化轮播之前，我已经为轮播中的每个div设置了data-position属性.然后，我将此属性用作to.owl.carousel事件的参数.

I've set the data-position attribute for each div inside the carousel before initializing the carousel. Then I use this attribute as a parameter of the to.owl.carousel event.

请检查结果: 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>

这篇关于单击的项目应位于猫头鹰轮播的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！