根据用户在轮播中的位置查找 owl 轮播的索引
Finding the index of a owl carousel depending on where the user is at on the carousel
如上所说,有没有办法获取轮播的索引?
我想根据用户所在的位置(蓝色箭头)更改文本(红色箭头所示)。我
您可以按照 document 使用轮播事件。请尝试以下代码。
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({
autoplay: false,
autoplaySpeed: 300,
loop: false,
navSpeed: 300,
items: 1,
margin: 2
});
owl.on('changed.owl.carousel', function(e) {
$('#continue-btn').html('Continue ' + e.item.index);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
</div>
<button id="continue-btn">
Continue
</button>
如上所说,有没有办法获取轮播的索引?
我想根据用户所在的位置(蓝色箭头)更改文本(红色箭头所示)。我
您可以按照 document 使用轮播事件。请尝试以下代码。
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({
autoplay: false,
autoplaySpeed: 300,
loop: false,
navSpeed: 300,
items: 1,
margin: 2
});
owl.on('changed.owl.carousel', function(e) {
$('#continue-btn').html('Continue ' + e.item.index);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
</div>
<button id="continue-btn">
Continue
</button>