О замечательном слайдере NivoSlider, я уже писал небольшую заметку. Возвращаюсь к вопросу с некоторыми практическими замечаниями.
Разработчики во всю занимаются монетизацией своего слайдера и других своих плагинов, интегрируя его в виде модуля в разные сайтовые движки. Потому найти и скачать плагин с сайта dev7studios.com не получится. Описание плагина уже не доступно по старым ссылкам, пришлось их убрать из статьи.
Так что для начала поделюсь тем дистрибутивом, что у меня остался с халявных времен. :)
скачать NivoSlider jQueryPlagin v3.2
Получим доступ к свойствам слайдера во время исполнения (run-time).
Слайдер позволяет привязать функции к некоторым своим событиям при инициализации. Но как получить доступ к свойствам объекта слайдера? Рассмотрим на примере:
|
1 2 3 4 5 6 7 8 |
<script> $('#NivoSlider').nivoSlider({ afterChange: function() { var i = jQuery('#NivoSlider').data('nivo:vars').currentSlide; alert(i); } }); </script> |
Здесь мы подключаем слайдер к контейнеру #NivoSlider, и присоединяем функцию к событию слайдера afterChange. При возникновении этого события мы извлекаем одно из свойств слайдера (в нашем примере это — currentSlide — номер текущего кадра с нумерацией от нуля).
Вот все свойства, которые можно извлечь таким способом:
- currentSlide — номер текущего кадра
- currentImage — указывает на соответствующий текущему слайду [object HTMLImageElement]
- totalSlides — кол-во кадров
- running (true/false) — флажок, устанавливается на период анимации смены слайдов.
- paused (true/false) — флажок, устанавливается когда необходимо приостановить смену слайдов, к примеру, в момент наведения на слайд курсора.
- stop (true/false) — флажок, устанавливается, если анимация остановлена, смена слайдов производится вручную.
- controlNavEl — DOM элемент, соответствующий навигационному контейнеру (с классом .nivo-controlNav).