Обходной путь скольжения Nivo Slider (не всегда скольжение в одном направлении)

Позвольте мне добавить префикс, сказав, как сильно я люблю это сообщество здесь, в stackoverflow, и это всегда очень помогает просматривать и задавать вопросы здесь, так что большое спасибо!

Эта проблема. Итак, у меня есть клиент, которому нужно слайд-шоу, которое может перемещать изображения справа-> на-> влево, если нажата стрелка вправо, и слева-> вправо-> если нажата стрелка влево.

В настоящее время в документации по конфигурации для nivo-slider (это единственный, который я действительно когда-либо использовал) я не могу найти ничего, кроме как всегда скользить вправо или всегда скользить влево (slideInLeft, slideInRight).

Можно ли вообще, например, изобразить, что нажато, и запустить этот метод анимации вместо обычного?

Заранее спасибо, Алески.


javascript jquery nivo-slider
person Aleski    schedule 26.01.2012    source источник
comment
У меня та же проблема. Я пытался изменить settings.effect на лету, когда меняются предыдущие/следующие ссылки, но это не работает.   -  person melat0nin    schedule 13.03.2012
comment
Вы нашли обходной путь для этого? тоже пытаюсь понять как это сделать   -  person Chris    schedule 26.04.2012

Ответы (3)


arrow_upward
1
arrow_downward

Добавьте это в «jquery.nivo.slider.js» перед комментарием «// Запустить эффекты» после комментария и кода в «// Пользовательский переход, как определено атрибутом «data-transition»». Это шоу изменяет текущий эффект, если вы нажимаете на левую или правую стрелку или кнопки. Для этой работы у вас должно быть изображение в HTML без атрибута «переход данных» и эффект по умолчанию, который вы должны определить в «jquery.nivo.slider.js» под комментарием «//Настройки по умолчанию», потому что атрибут «переход данных» предпочтительнее. Я правильно кодирую для своего проекта.

        if(nudge === 'prev'){
            currentEffect = 'slideInLeft';
        } 
        else if (nudge === 'next'){
            currentEffect = 'slideInRight';
        }
        else if (nudge === 'control'){
            currentEffect = 'fade'; /*test*/
        }
person Severe Torture    schedule 21.02.2013
comment
Я просто ничего не понимаю в этом ответе, кроме добавления кода в файл nivo js. Какой эффект я должен установить по умолчанию? - person Thomas Teilmann; 29.01.2015
comment
Эффект по умолчанию не важен для этого кода. Я меняю эффект по умолчанию на другой по вашему желанию. Без этого кода у вас будет только тот же эффект по умолчанию для стрелок и элементов управления. =› этот код со стрелкой вправо использует slideInLeft ; на левой стрелке slideInRight и на кнопке навигации используется эффект затухания. - person Severe Torture; 29.01.2015

arrow_upward
1
arrow_downward

Я только что заметил этот вопрос - я ответил похожий вопрос Криса, и это решение, надеюсь, сработает и для вас:

В соответствии с документацией слайдера nivo вы можете измените эффект для каждого слайда, добавив настраиваемый атрибут данных на любое или все изображения, и он переопределит переход nivo по умолчанию:

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

Вы можете динамически изменять эти пользовательские данные, настроив обработчик событий в теле документа для поиска нажатия клавиши, а затем изменив атрибуты всех изображений, используя приведенный ниже фрагмент:

var $body = $("body");
var $images = $("img");

$body.on('keydown', function(e) {
  if(e.keyCode == 37) { // left 
     $images.attr("data-transition","slideInLeft");
  }
  else if(e.keyCode == 39) { // right
     $images.attr("data-transition","slideInRight");
            }
    });
person Greg Jennings    schedule 27.04.2012

arrow_upward
0
arrow_downward

Я исправляю это, помещая следующий код в функцию nivoRun файла jQuery.nivo.slider.js (сразу после инициализации переменной currentEffect):

if(settings.effect === 'slideInLeftRight')
{
    if(nudge === 'prev')
    {
        currentEffect = 'slideInRight';
    }
    else
    {
        currentEffect = 'slideInLeft';
    }
};

Этот код создает ваш собственный эффект под названием slideInLeftRight.

Эффект slideInLeftRight будет использовать эффект slideInRight при нажатии кнопки prev и эффект slideInLeft при нажатии кнопки next.

Используйте эффект slideInLeftRight следующим образом:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'slideInLeftRight',
        ...
    });
});
</script>
person Steve Van Opstal    schedule 11.04.2013