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