Товар успешно добавлен в корзину!
Блог Кодинг Портфолио Я

Дорабатываем Nivo Slider

Кодинг JavaScript

 Nivo Slider оказался не способен справится с простейшей задачей. Организацией прокрутки слайдов по стрелкам с анимацией сдвига слайдов. 

 Во- первых, как оказалось, Nivo Slider не умеет применять разную анимацию для кнопок "вправо" и "влево", а также не умеет изменять тип анимации во время работы. Решение этой проблемы оказалось нетрудным. Прежде всего стоит сказать как вообще назначить переключение слайдов по нажатию кнопки. А делается это просто:

//предыдущий слайд

$('#slider. nivo-prevNav').trigger('click');

//следующий слайд

$('#slider. nivo-nextNav').trigger('click');

Далее смена анимации во время работы слайдера реализуется путем смены тега "data-transition" всех img слайдера. Тег заполняется названием анимации, в моем случае это выглядело следующим образом:

//для кнопки вперед 

$('#slider img').attr('data-transition', 'slideInLeft');

 //для кнопки назад

$('#slider img').attr('data-transition', 'slideInRight');

 Не забываем после переключения вернуть анимацию на первоначальный вариант, в случаях когда установлено переключение слайдов по таймеру.

 А теперь еще одна проблема. Анимация 'slideInLeft' и 'slideInRight' разная! И заказчику это конечно же не понравилось. Для правки анимации пришлось заглянуть в код слайдера и внести изменения. Разработчики не слишком то замудрялись. Следует внести следующие правки после строки "if(currentEffect === 'slideInRight'){" удаляем все содержание условия и вставляем 

createSlices(slider, settings, vars);

 firstSlice = $('.nivo-slice:first', slider);

 firstSlice.css({
 'width': slider.width(),
 'margin-left': — slider.width(),
 'opacity': '1',
 });

 firstSlice.animate({ 'marginLeft': '0px' },(settings.animSpeed*2), '', function(){ 
 slider.trigger('nivo:animFinished'); 
 });

 А для минимизированной pack — версии скрипта ищем строку "if(g==='slideInRight'){" и далее заменяем строку

{m(b,d,f);q=a(".nivo-slice:first",b);q.css({width:"0px",opacity:"1"});q.animate({width:b.width()+"px"},d.animSpeed*2,"",function(){b.trigger( "nivo:animFinished")})}

 на 

{m(b,d,f);q=a(".nivo-slice:first",b);q.css({'width': b.width(), 'margin-left': -b.width(),'opacity':"1"});q.animate({'marginLeft': '0px'},d.animSpeed*2,"",function(){b.trigger( "nivo:animFinished")})}

 Готово! Пример можно посмотреть здесь

 

Скачать jquery.nivo.slider.js

Скачать jquery.nivo.slider.pack.js 


Nivo Slider, ниво слайдер, доработка, анимация01.12.2012, 4483 просмотра.

Комментарии

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

Дмитрий 15.05.2013 00:58:27 ответить #

Имя
E-mail
Комментарий
Добрый день, Дмитрий!

Для достижения желаемого эффекта придется править js код. Причем дело это может оказаться достаточно трудозатратным.

KAD 18.06.2013 20:04:38 ответить #

Имя
E-mail
Комментарий

Добавить комментарий

Имя
E-mail
Комментарий