Вопрос по jquery – Как вы можете изменить эффект в Nivo Slider, основываясь на предыдущем или следующем нажатии слайдов?

0

Я хочу изменить эффект перехода на слайдере Nivo в зависимости от того, какая кнопка была нажата. Есть идеи, как этого добиться?

Update Чтобы уточнить, я имел в виду следующую или предыдущую кнопку, а не кнопку на клавиатуре. Что я ищу, так это то, что, если человек нажимает следующую кнопку, вызывается эффект перехода slideToRight. Если человек нажимает предыдущую кнопку, вызывается эффект перехода slideToLeft. Тогда глазурь на торте будет, если кто-то нажимает на конкретное слайд, если он скользит в правильном направлении. Мне нравится Nivo Slider, но я чувствую, что это должны быть действия по умолчанию.

Ваш Ответ

4   ответа
0

<script type='text/javascript'>
$(document).ready(function() {
    jQuery("#previousButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-prevNav").click();
    });
    jQuery("#nextButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-nextNav").click();
    });
});
</script>
5

$('.nivo-prevNav').live('mouseover', function(){
     $('#slider img').attr("data-transition","sliceUpDown");
});

$('.nivo-nextNav').live('mouseover', function(){
     $('#slider img').attr("data-transition","sliceUpDownLeft");
});
0

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

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

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

     $('body').on('keypress', function(){
            $('img').attr("data-transition","slideInLeft");
            });

Вы можете продвинуться дальше и перейти к конкретным типам переходов на основе нажатой клавиши, добавив немного логики, но это общая идея. Рабочая скрипка здесь:http://jsfiddle.net/gregjuva/2ZXCp/

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Chris
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededslidejs.com
Error: User Rate Limit Exceeded Chris
0

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

        if(nudge === 'prev'){
            currentEffect = 'slideInLeft';
        } 
        else if (nudge === 'next'){
            currentEffect = 'slideInRight';
        }
        else if (nudge === 'control'){
            currentEffect = 'fade'; /*test*/
        }

Похожие вопросы