>我正在尝试在到达轮播的最后一张幻灯片时运行一个函数。我已经设法使用 afterInit 和 afterMove 回调来循环轮播项目,但我只需要能够在循环结束时运行一个函数。
希望你能帮到忙。
插件:http://owlgraphic.com/owlcarousel/#customizing
slideshow.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
autoPlay: false,
stopOnHover: false,
afterInit : cycle,
afterMove : moved,
});
function cycle(elem){
$elem = elem;
//start counting
start();
}
function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false){
percentTime += 1 / time;
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}
function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}
我找不到任何onEnd
处理程序。
但是,您可以使用afterMove
事件通过访问轮播实例属性currentItem
和itemsCount
来检查显示的元素是否为最后一个元素。
裁判:
var owl = $(".owl-carousel").data('owlCarousel');
法典:
// carousel setup
$(".owl-carousel").owlCarousel({
navigation: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
autoHeight: true,
afterMove: moved,
});
function moved() {
var owl = $(".owl-carousel").data('owlCarousel');
if (owl.currentItem + 1 === owl.itemsAmount) {
alert('THE END');
}
}
演示:http://jsfiddle.net/IrvinDominin/34bJ6/
以上(我想)适用于猫头鹰旋转木马 1,但如果您使用的是新的 Owl 2 测试版,您将需要:
$('.owl-carousel').on('change.owl.carousel', function(e) {
if (e.namespace && e.property.name === 'position'
&& e.relatedTarget.relative(e.property.value) === e.relatedTarget.items().length - 1) {
// put your stuff here ...
console.log('last slide')
}
});
顺便说一句,我在这里得到了上面的答案:https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502
,一个更好的解决方案:(上面的代码没有考虑一次显示可变数量的项目的响应式布局)
mySlider.on('change.owl.carousel', function(e) {
// number of items on screen updates on responsive
var shown = e.page.size
// total number of slides
var total = e.relatedTarget.items().length - 1
// current slide index
var current = e.item.index
// how many slides to go?
var remain = total - (shown + current)
if( !remain ){
// last slide, fire a method - but dont forget to add checks that you only fire it or execute it once
}
});
mySlider.on('changed.owl.carousel', function(e) {
// am i the first slide? I do it this way so that we can check for first being true
var first = ( !e.item.index)
if( first ){
// first slide, fire a method - but dont forget to add checks that you only fire it or execute it once
}
});
对于在2016年使用测试版的任何人来说,最简单的方法是使用"翻译"事件,如下所示:
// I'm using Drupal so I already have a carousel going.
var owl = $('#owl-carousel-page2');
// After slide has moved fire some stuff
owl.on('translated.owl.carousel', function (event) {
console.log(event, "the event after move");
});
我已经阅读了很多执行此操作的方法,但这似乎最适合仅供参考。
我遇到了同样的问题,所以我搜索了,但这些答案对我不起作用,所以这是我的解决方案,它也适用于多项目幻灯片和单项目幻灯片。
$('.owl-carousel').on('changed.owl.carousel', function(e) {
if (e.page.index+1 == e.page.count) {
console.log('last');
}
if (e.item.index==0) {
console.log('start');
}
});
以上所有解决方案都不适用于猫头鹰旋转木马 2.3.4
所以我必须想办法做到这一点,我最终得到了以下解决方案
$('.owl-carousel').on('changed.owl.carousel', function(e) {
var items = e.item.count; // Number of items
var item = e.item.index; // Position of the current item
var size = e.page.size; // Number of items per page
if (item === 0) {
console.log('Start')
}
if ((items - item) === size) {
console.log('Last')
}
});
我知道这个问题有点老了,但我提出了一个更简单的解决方案,涵盖了两种情况:multiple(customItems)和singleItem,就像这样使用它:
$('.wrap_carousel_feeds').owlCarousel({
rewindNav: false,
responsiveRefreshRate: 50,
//singleItem: true, //works
itemsCustom: [
[2570, 15], [2390, 14], [2210, 13], [2030, 12], [1850, 11], [1670, 10], [1490, 9], [1310, 8], [1130, 7], [950, 6], [770, 5], [590, 4]
], //works too
afterMove: function(owl){
data = $(owl).data('owlCarousel');
isLast = data.currentItem + data.visibleItems.length == data.itemsAmount;
if(isLast){ //returns true when reaches the last
//do stuffs
}
}
});
小提琴:http://jsfiddle.net/rafaelmoni/1ty13y93/
我正在使用猫头鹰轮播 2,发现这些变量可能会有所帮助:
$('.owl-carousel').on('change.owl.carousel', function(e) {
var carousel = e.currentTarget,
totalPageNumber = e.page.count, // count start from 1
currentPageNumber = e.page.index + 1; // index start from 0
if(currentPageNumber === totalPageNumber - 1){
console.log('last page reached!');
}
});
});
光滑的旋转木马是猫头鹰旋转木马的更好替代品。我强烈推荐。
$carousel.on('change.owl.carousel', function (e) {
if (e.namespace && e.property.name === 'position' && e.item.index === e.item.count - 1) {
if (ko.isObservable(values.loaded)) {
values.loaded(false);
}
}
});
见下文:
$(".owl-carousel").on('change.owl.carousel', function(e) {
var total = e.item.count, // # of total items
itemsPerPage = e.page.size, // # of items that appear per page
itemGoOut = e.item.index, // index of last item that appeared then went out (index start with 0)
itemRemain = total - (itemsPerPage + itemGoOut + 1);
if(itemRemain === 0){
console.log("No more Items");
}
});