owl轮播如何使用回调函数取值

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-轮播')

// 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: items is not defined

Answer 1

items is not defined 因为它是在函数内部声明的，而您试图在该函数外部访问它。您可以在回调中移动 owl.trigger，以便它可以访问 items 变量。

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

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

// attach the carousel and set the params
owl.owlCarousel({
    margin: 50,
    nav: false
})

Answer 2

首先，您收到此错误是因为您在函数 (owl.on) 中声明了 items 并尝试从函数外访问它。
为什么你不创建一个 returns 计数

的函数

function getCount(){
  return count;
}

owl.trigger('to.owl.carousel', getCount());

Answer 3

您可以在自动滚动到最后一个元素的触发事件中使用 -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>

owl轮播如何使用回调函数取值

owl carousel how to use callback function values

javascript

jquery

owl-carousel