当使用jquery点击滑块中的任何图像时，如何在中心移动图像

Question

我想在点击图像时将图像移动到中心。下面是我尝试过的代码，它运行得很好，但根据要求，当我点击图像时，我必须将图像移动到中心。有人能帮我吗？

使用owl-carousel 2.1.1版本和CSS3 Flexbox，只需添加样式：

.owl-carousel .owl-stage {
display: flex;
align-items: center;
}

$( document ).ready( function() {
$( '.owl-carousel' ).owlCarousel({
autoplay: true,
margin: 2,
loop: true,
responsive: {
0: {
items:1
},
200: {
items:3
},
500: {
items:4
}
}
});
});
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
.owl-carousel .caption {
text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="owl-carousel">
<div class="item">
<img src="http://lorempicsum.com/up/350/200/1">
<div class="caption">Caption 1</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/255/200/2">
<div class="caption">Caption 2</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/200/3">
<div class="caption">Caption 3</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/300/4">
<div class="caption">Caption 4</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/400/5">
<div class="caption">Caption 5</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/255/200/6">
<div class="caption">Caption 6</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Answer 1

您可以在幻灯片上使用OwlCarousel的"Url哈希导航"，如下所示：

$( document ).ready( function() {
$( '.owl-carousel' ).owlCarousel({
autoplay: true,
margin: 2,
loop: true,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash',
center:true,
responsive: {
0: {
items:1
},
200: {
items:3
},
500: {
items:4
}
}
});
});

.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
.owl-carousel .caption {
text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="owl-carousel">
<div class="item" data-hash="one">
<a href="#one">
<img src="http://lorempicsum.com/up/350/200/1">
<div class="caption">Caption 1</div>
</a>
</div>
<div class="item" data-hash="two">
<a href="#two">
<img src="http://lorempicsum.com/up/255/200/2">
<div class="caption">Caption 2</div>
</a>
</div>
<div class="item" data-hash="three">
<a href="#three">
<img src="http://lorempicsum.com/up/627/200/3">
<div class="caption">Caption 3</div>
</a>
</div>
<div class="item" data-hash="four">
<a href="#four">
<img src="http://lorempicsum.com/up/627/300/4">
<div class="caption">Caption 4</div>
</a>
</div>
<div class="item" data-hash="five">
<a href="#five">
<img src="http://lorempicsum.com/up/627/400/5">
<div class="caption">Caption 5</div>
</a>
</div>
<div class="item" data-hash="six">
<a href="#six">
<img src="http://lorempicsum.com/up/255/200/6">
<div class="caption">Caption 6</div>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

参考。链接：https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html