Разная анимация для Nivo slider

Опубликовано 2014.03.28 в разделе JavaScript

У слайдера Nivo slider есть один существенный недостаток - одинаковая анимация для смены картинок. То есть если листать картинки как влево, так и вправо - анимация всегда будет одной и той-же. Это не всегда выглядит красиво. Победить эту проблему получилось только патчем библиотеки. Я приведу пример и приложу исходник. Открывайте jquery.nivo.slider.js и ищите текст // Get our vars, это примерно 290 строка. Добавьте после неё следующую строчку:
  1. var slide_bilo = $('div.nivo-controlNav a.active').attr('rel');
Затем найдите текст // Run effects, это примерно 360 строка. Добавьте перед ней следующий код:
  1. if(nudge === 'prev'){
  2. currentEffect = 'slideInLeft';
  3. }
  4. else if (nudge === 'next'){
  5. currentEffect = 'slideInRight';
  6. }
  7. else if (nudge === 'control'){
  8. var slide_stalo = $('div.nivo-controlNav a.active').attr('rel');
  9. var razn = slide_bilo - slide_stalo;
  10. if(razn > 0){
  11. currentEffect = 'slideInLeft';
  12. }else{
  13. currentEffect = 'slideInRight';
  14. }
  15. }
Готово. Теперь при прокрутке влево будет одна анимация, а при прокрутке вправо - другая. Код будет работать при клике на кнопки "влево/вправо", при клике на кнопки навигации и при автоматической смене слайдов.

6 Комментариев

Оставить комментарий

  1. Гость 2014/12/11

    Хотел сказать, что нет такого параметра как random порядок отображения картинки..пример..есть 1,2,3,.....,21 картинка. Случайное начало позволяет начать отображение например с 5го рисунка, но дальше грузятся 5,6,7,....,21,1,2,3,4 и по кругу..а хотелось бы разнообразия..а то такая поочередность не очень гуд(

    Ответить

    1. Админ 2014/12/12

      Понятно. Ну если ниво слайдер так не умеет и его сложно научить-тогда имеет смысл отрисовывать эти картинки случайным образом, ещё на стороне сервера.
      Они у вас как выводятся?Вьюсом, каким-то своим кодом?

      Ответить

      1. Гость 2014/12/12

        Картинки загружаются в бекэнде админки движка opencart - данный слайдер там как раз встроен, боюсь подобный скрипт для стороны сервера не осилю...наверное это нереально, если нигде не смог найти данной инфы, даже на забугорных форумах

        Ответить

        1. Админ 2014/12/12

          Ну тогда вряд ли подскажу. Я бы конечно в движке покопался.

          Ответить

  2. Гость 2014/12/08

    Подскажите, а как сделать randomной смену каждого следующего изображения с слайдере - сейчас оно идет по порядку, из random только случайное начало первого изображения и случайные эффекты...

    Ответить

    1. Админ 2014/12/09

      То есть есть список анимаций и при рандомном они всё-равно идут по-порядку, начиная со случайного?

      Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте письмо