Слайдер Nivo, делайте пользовательские ссылки, меняйте слайды по клику

Question

В настоящее время мы работаем над следующим сайтом: http://www.temminktrainingcoaching.nl/beta

Есть меню lavalamp с ползунком Nivo, которое мы хотели бы связать вместе.Как видите, в меню 5 слайдов и 5 ссылок.Мы хотели бы, чтобы они соответствовали.Это фрагмент кода в nivoslider, который изменяет слайды:

$('.nivo-controlNav a', slider).live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

Я довольно новичок в jquery, я не мог понять, как создавать собственные ссылки.Я пытался изменить '.nivo.controlNav a' на соответствующие ссылки, но, похоже, это не сработало.

Спасибо за любую помощь!

С уважением, Каспер

Answer 1

Вы можете вызывать методы внутри плагина-слайдера Nivo для создания эффекта slideTo или go to slide без необходимости изменения кода подключаемого модуля.

1. Установите индекс currentSlide равным единице перед желаемым слайдом, затем
2. Чтобы перейти вперед, нажмите кнопку «Далее», чтобы перейти вперед.

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

Оберните это как функцию jQuery и вызовите это:

 (function($) { 
         // slideTo function for nivo-slider
        $.slideTo = function(idx) {
            $('#slider').data('nivo:vars').currentSlide = idx - 1;
            $("#slider a.nivo-nextNav").trigger('click'); 
        }
  })(jQuery);
  // call the function
  // example:
  $.slideTo(3);

Answer 2

Мне удалось решить эту проблему с помощью форка кода, доступного на github: https://github.com/gilbitron/Nivo-Slider/pull/176

У него есть новая функция slideTo (), которая, кажется, хорошо работает для этого.

Назовите этот код, чтобы перейти к слайду 2

$('#slider').data('nivoslider').slideTo(1);

Answer 3

Вы можете нажать на соответствующую ссылку управления, которую генерирует Nivo, например, чтобы изменить ползунок на 4-ю ссылку:

$('.nivo-control[rel="3"]').trigger("click");

Answer 4

Собственные элементы управления навигацией Nivo работают из следующего кода:

<div class="nivo-controlNav">
  <a class="nivo-control" rel="0">1</a>
  <a class="nivo-control" rel="1">2</a>
  <a class="nivo-control" rel="2">3</a>
  <a class="nivo-control" rel="3">4</a>
</div>

Мы могли бы продублировать это, чтобы создать собственную навигацию, если бы не первая строка функции управления:

$('.nivo-controlNav a', slider).live('click', function(){

Второй параметр идентификатора jQuery (slider) означает, что элементы управления подтверждаются только внутри элемента слайдера, обычно в пределах элемента #slider.Если вы используете неинициализированный jquery.nivo-slider.js и удалите параметр slider, то вы можете использовать приведенный выше код в своей собственной навигации.Измененная функция должна выглядеть следующим образом:

        $('.nivo-controlNav a').live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

То есть любой элемент 'a' в элементе '.nivo-contolNav' будет управлять ползунком.используйте атрибуты "rel", чтобы указать нужную страницу слайдера.

Кроме того, для параметра controlNav должно быть установлено значение true, но это значение по умолчанию.