owl carousel如何使用回调函数值答案

【问题标题】：owl carousel how to use callback function valuesowl carousel如何使用回调函数值
【发布时间】：2019-08-16 17:25:09
【问题描述】：

我想在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: items is not defined

【问题讨论】：

这么简单....owl.trigger('to.owl.carousel', -1) 谢谢@Alex-HM

标签： javascript jquery owl-carousel

【解决方案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>

【讨论】：

【解决方案2】：

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
})

【讨论】：

谢谢，我试过了，但我不工作...猫头鹰不能在另一个函数中

【解决方案3】：

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

function getCount(){
  return count;
}

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

【讨论】：