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

 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