javascript - owl carousel 如何使用回调函数值

Question

我想在 owl.trigger('to.owl.carousel', index) 中使用 event.item.count 的值

加载时，我希望轮播滚动到最后一个可用的项目，如果您有一定数量的项目，这很好，但我的项目列表(即将发生的事件)是动态的，并且总是被添加到。我看到您可以看到回调事件 fn owl.on('initialize.owl.carousel',function(){}) 中的总项目，但是我如何获取该值以在 owl.trigger('to.owl.carousel', items)

var owl = $('.owl-carousel')

// on initialise...
owl.on('initialize.owl.carousel', event => {
    //get this var out???? 
    var items = event.item.count

})

// attach the carousel and set the params
owl.owlCarousel({
    margin: 50,
    nav: false
})
//event handler
//HERE I WANT TO USE THE ITEMS VALUE
owl.trigger('to.owl.carousel', items)

控制台出现错误 Uncaught ReferenceError :项目未定义

Answer 1

您可以在触发事件中使用 -1 来自动滚动到最后一个元素，而不是计算所有元素然后获取最后一个索引。

$(".owl-carousel").owlCarousel();

$('#btn1').on('click', function(e) {
    $('.owl-carousel').trigger('to.owl.carousel', 0)
})
$('#btn2').on('click', function(e) {
    $('.owl-carousel').trigger('to.owl.carousel', -1)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<button id="btn1">go to first</button>
<button id="btn2">go to last</button>
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>