2013-06-17 3 views
4

Я хотел бы настроить flexslider, чтобы он запускал/возобновлял авто слайд-шоу при наведении курсора мыши и приостанавливал его на мыши. Точно опосля нормального поведения. : DFlexslider resume slideshow on mouseover

Так у меня этот вопрос: TypeError: «не определено» не является функцией (оценка «slider.resume()») и поиск в интернете не дали никаких результатов.

Мой сценарий:

$(document).ready(function() { 
    var $slider = $('.flexslider'); 

    $slider.flexslider({ 
    controlNav: false, 
    directionNav: false, 
    slideshow: true, 
    slideshowSpeed: 500, 
    animationSpeed: 300, 
    /*randomize: true,*/ 
    controlsContainer: ".flex-container", 
    start: function(slider) { 
     slider.pause(); 
     slider.mouseover(function() { 
     slider.resume(); 
    }); 
    }, 
}); 

});

Любое указатель на правильное направление было бы полезно.

Luka

* обновление ... Я нашел решение, которое работает ... Если кто-то хочет знать, это:

start: function(slider) { 
     slider.pause(); 
     slider.manualPause = true; 
     $slider.mouseover(function() { 
      slider.manualPause = false; 
      slider.play(); 
     }); 
     $slider.mouseout(function() { 
      slider.manualPause = true; 
      slider.pause(); 
     }); 
    } 

Luka

+0

Сделать это как ответ и обозначить его как решение, чтобы быть более читаемым. Спасибо – Mounir

+0

Сделано. Tnx для того, чтобы сообщить мне. –

ответ

5

Я нашел решение, работы:

start: function(slider) { 
     slider.pause(); 
     slider.manualPause = true; 
     slider.mouseover(function() { 
      slider.manualPause = false; 
      slider.play(); 
     }); 
     slider.mouseout(function() { 
      slider.manualPause = true; 
      slider.pause(); 
     }); 
    } 
0

На самом деле это работает немного лучше:

start: function(slider) { 
    slider.pause(); 
    slider.manualPause = true; 
    slider.mouseenter(function(){ 
     slider.flexslider('next'); 
     slider.play(); 
     slider.manualPause = false; 
    }); 
    slider.parent().mouseleave(function() { 
     slider.manualPause = true; 
     slider.pause(); 
    }); 
} 

Это предотвращает срабатывание функции несколько раз и позволяет перейти на следующий слайд непосредственно без начальной задержки функции play().

0

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

$hoveredElement.on('focusin', function() { 

    $slider.slick('slickPause'); 

}); 

Или резюме автозапуск по наведению:

$hoveredElement.on('focusin', function() { 

    $slider.slick('slickPlay'); 

}); 

Все это предполагает, что Вы имеете сначала объявили ваши настройки $slider!