NIVO 슬라이더, 사용자 정의 링크가 다 왔어요 현재 다음 사이트 작업을 클릭

Question

에 슬라이드를 변경합니다 우리가 함께 연결하고 싶은 NIVO 슬라이더를 가진 lavalamp 메뉴가있다 http://www.temminktrainingcoaching.nl/beta

. 보시다시피 메뉴에는 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

나는 GitHub의에서 사용할 수있는 코드의 포크를 사용하여이 문제를 해결 할 수 있었다 : https://github.com/gilbitron/Nivo-Slider/pull/176

이 있습니다이 잘 작동하는 것 같다 새로운 기능 slideTo() .

콜이 코드는 슬라이드로 이동합니다 2

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

Answer 2

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(){ 

두 번째 매개 변수 (slider)는 컨트롤이 슬라이더 요소 (일반적으로 #slider div 내의 모든 요소)에서만 인식된다는 것을 의미합니다. 조정되지 않은 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'); 
     }); 

하는 '.nivo-contolNav' 소자 내의 'a' 요소 슬라이더를 제어한다. "rel"속성을 사용하여 원하는 슬라이더 페이지를 지정하십시오.

또한 controlNav 설정을 true로 설정해야하지만 이것이 기본 설정입니다.

Answer 3

Nivo 슬라이더 플러그인에서 메소드를 호출하여 플러그인 코드를 수정하지 않고도 'slideTo'또는 '슬라이드로 이동'을 실행할 수 있습니다.

1. 는
2. 트리거 앞으로 전진하는 nextNav에서 클릭 한 후, 원하는 슬라이드 currentSlide 전에 하나의 인덱스를 설정한다.

참고 : 이것은 nivo 슬라이더 이미지를 동적으로 업데이트하는 경우에도 좋은 해결책으로 사용됩니다. 이 경우 이미지 소스를 업데이트 한 다음 slideTo를 currentSlide로 업데이트하십시오. 모든 슬라이스는 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 4

당신은 NIVO가 생성하는, 예를 들어, 4 링크 슬라이더를 변경하는 관련 제어 링크를 클릭을 트리거 할 수 있습니다

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