пауза слайдера орбиты jquery на последнем слайде - PullRequest
Новая
       29

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

1 голос
/ 19 декабря 2011

Я использую 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 (потому что, если я выключаю таймер, тогда кадры не продвигаются, и я спрятал навигационные указатели так ...): 

div.timer {display: none;}

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

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

afterSlideChange: function(){}

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

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

Большое спасибо за ваше время и за то, что поделились своим опытом!

Jon

Ответы [ 2 ]

0 голосов
/ 20 апреля 2013

Понял, но это работает, только если ползунок Орбита установлен на паузу при наведении курсора мыши.

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

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

<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>
0 голосов
/ 24 июля 2012

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

...