开发者问题收集

owl carousel如何使用回调函数值

2019-08-16
8329
javascript jquery owl-carousel

我想在 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：未定义项目

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>
Alex-HM
2019-08-16

items 未定义 ，因为它是在函数内部声明的，而您尝试在该函数外部访问它。 您可以将 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
})
Félix Paradis
2019-08-16

首先，您之所以会遇到此错误，是因为您在函数 ( owl.on ) 中声明了 items ，并尝试从函数外访问它。
为什么您不创建一个返回计数的函数 

function getCount(){
  return count;
}

owl.trigger('to.owl.carousel', getCount());
Neel Rathod
2019-08-16