猫头鹰轮播:到达最后一张幻灯片时运行功能
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了猫头鹰轮播:到达最后一张幻灯片时运行功能相关的知识,希望对你有一定的参考价值。
我正在尝试在达到旋转木马的最后一张幻灯片时运行一个功能。我已经设法使用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');
}
}
但是:Kua zxsw指出
以上作品(我想)在猫头鹰旋转木马1上,但如果你使用新的猫头鹰2测试版,你将需要:
http://jsfiddle.net/IrvinDominin/34bJ6/
我在这里得到了上面的答案顺便说一句: $('.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')
}
});
对于2016年使用测试版的任何人来说,最简单的方法是使用“翻译”事件,如下所示: -
https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502
我已经阅读了很多这样做的方法,但这看起来效果最好。
在我看来,一个更好的解决方案:(上面的代码没有考虑响应布局,一次显示可变数量的项目)
// 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");
});
我知道这个问题有点陈旧,但我提出了一个更简单的解决方案,涵盖了两种情况:multiple(customItems)和singleItem,只需使用它:
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
}
});
小提琴:$('.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
}
}
});
这是我对猫头鹰旋转木马100%工作的第二版(2)的解决方案。
对于触发器,我在这里使用api信息 - qazxsw poi
http://jsfiddle.net/rafaelmoni/1ty13y93/
我正在使用owl carousel 2并发现这些变量可能有助于:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html
光滑的旋转木马是猫头鹰旋转木马的更好的替代品。我强烈推荐这一点。
var owlSlide = jQuery('.slide');
owlSlide.owlCarousel({
loop:true,
autoplay:true,
autoplayTimeout: 3000
});
// jQuery method on
owlSlide.on('changed.owl.carousel',function(property){
if( property.item.index == 0 ){
$(property.target).find(".owl-prev").addClass('ailqk');
$(property.target).find(".owl-next").removeClass('ailqk');
}else{
var currnetel = property.item.index + property.page.size;
// last element
if( currnetel == property.item.count ){
$(property.target).find(".owl-next").addClass('ailqk');
$(property.target).find(".owl-prev").removeClass('ailqk');
}else{
$(property.target).find(".owl-next").removeClass('ailqk');
$(property.target).find(".owl-prev").removeClass('ailqk');
}
}
});
以上是关于猫头鹰轮播:到达最后一张幻灯片时运行功能的主要内容,如果未能解决你的问题,请参考以下文章