Внешние элементы управления (следующий/предыдущий) для Nivo Slider (raphaeljs)?

Я пытаюсь создать слайд-шоу с кнопками «Далее/предыдущее». Я использую NivoSlider для классных переходов и raphaelJS для анимированных кнопок «следующий/предыдущий». Моя единственная проблема заключается в том, что нет встроенного способа дать Nivoslider элемент, представляющий кнопку «Далее». Поскольку мой элемент представляет собой треугольник, который анимируется, мне нужно каким-то образом сообщить NivoSlider, что я хочу, чтобы $(triangle.node) представлял следующий и предыдущий. Библиотека является частной (я думаю, вы так это выражаете), поэтому она не может видеть глобальный треугольник. Есть идеи?


javascript jquery nivo-slider raphael
person Rey    schedule 26.07.2011    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Добавьте этот код перед инициализацией Nivo Slider и замените параметры на ваш треугольникNodePrev/Next. Это имеет то преимущество, что отключает действие по умолчанию для ваших ссылок, поэтому, если вы используете href="#", браузер не прокручивается назад к началу страницы.

$('#previousButton, #nextButton').on('click', function (e) {

         // Prevent the link from being followed
         e.preventDefault();

         // Initialize variables 
         var buttonId = this.id,
          buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';

         // Trigger the slider button
         $('.nivo-directionNav').find(buttonClass).click();
    });
person Dylan Valade    schedule 27.07.2011

arrow_upward
3
arrow_downward 

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})

Это должно это сделать, но в любом случае нужные вам команды

$(".nivo-directionNav .nivo-prevNav").click()

а также

$(".nivo-directionNav .nivo-nextNav").click()
person Joseph Marikle    schedule 26.07.2011
comment
+1 за правильный подход. Я взял то, что у вас было, и опубликовал немного более сложный ответ, потому что я думаю, что предотвращение по умолчанию и единственная функция стоят дополнительных строк. - person Dylan Valade; 27.07.2011
comment
Я выбрал другой ответ, но спасибо и за это решение. +1. - person Rey; 29.07.2011
comment
это круто. Мне тоже больше нравится решение Дилана. : P Спасибо за +1 :) - person Joseph Marikle; 29.07.2011
comment
Этот ответ намного лучше. - person Muhammad Irfan; 24.05.2013