орбита JQuery слайдер пауза на последнем слайде

Question

Я использую Zurb Orbit Slider: http://www.zurb.com/playground/jquery_image_slider_plugin

У меня есть слайд-шоу, используя следующие параметры:

$(window).load(function() { 
$('#featured').orbit({ 
    animation: 'fade',    
    animationSpeed: 100,    // how fast animtions are 
    timer: true,      // true or false to have the timer 
    advanceSpeed: 250,     // time between transitions 
    directionalNav: false,    // manual advancing directional navs 
    afterSlideChange: function(){}  // empty function    
    }); 
}); 

затем я прячусь таймер с помощью CSS (потому что если я выключить таймер тогда кадры не вперед и я скрыл направленный NAVS так ...):

div.timer {display: none;} 

во всяком случае, все до сих пор прекрасно работают для меня. то, что я могу понять, как это сделать, - заставить слайд-шоу перестать вращаться через слайды, то есть остановиться на последнем слайде/не возвращаться к первому.

я подозреваю, что ответ должен что-то делать с возможностью добавления функции после смены слайдов:

afterSlideChange: function(){} 

, но, увы, это JS вне меня.

в случае, если вам интересно: это небольшой эксперимент, в котором я использую ползунок jquery, чтобы создать своего рода анимацию остановки движения, технику, о которой я давно задумывался. он работает отлично, но навсегда цикл действительно закручивает вещи. :)

большое спасибо за ваше время и за обмен опытом!

Jon

Answer 1

Фигурного его, однако это работает только если у вас есть ползунок Orbit установлен на паузу при наведении мыши.

Решение: Если вы установили ползунок орбит для паузы на мыши, вы можете вызвать событие mouseover на определенном слайде с помощью jquery. В основном я использовал счетчик и функцию afterslidechange, чтобы собрать все это вместе. Ниже приведен код, просто скопируйте и вставьте его в свой html-файл или где-нибудь ваш слайдер Orbit.

ПРИМЕЧАНИЕ. Код ниже установлен для четырех слайдов. Он останавливается на первом слайде после одного цикла. Если вы хотите изменить номер слайда, просто измените значение счета в условии if. Вам также нужно будет добавить ссылки на каждое изображение в слайдере и присвоить идентификатор каждой ссылке. Это необходимо для вызова события on mouseover.

<div id="featured"> 
<a href="#" id="link"><img src="images/hero1.jpg" /></a> 
<a href="#" id="link"><img src="images/hero2.jpg" /></a> 
<a href="#" id="link"><img src="images/hero3.jpg" /></a> 
<a href="#" id="link"><img src="images/hero4.jpg" /></a> 
</div> 

<script type="text/javascript"> 
var count = 1; 
$(window).load(function() 
{ 
    $('#featured').orbit(
     { 
     afterSlideChange: function() 
    { 
     count++; 
     if(count == 5) 
      { 
       $("#link").trigger("mouseover"); 
      } 

    }    
    }); 
}); 

</script>  

Answer 2

Я нашел это при поиске себя: https://github.com/zurb/orbit/issues/49