Cycle2插件 - goto getSlideIndex

Question

我需要我的幻燈片纔能有一個輪播下一個按鈕。轉盤需要回繞，點擊轉盤每個縮略圖需要改變主幻燈片（＃幻燈片-1）

的下按鈕只執行一個任務，它是通過每個縮略圖中移動＃slideshow-2。它目前只有3個圖像顯示，但最終會有6個。

開箱即用，來自malsup的代碼不允許打包並且能夠單擊縮略圖來更改主幻燈片。它只允許包裝或不包裝。 （沒有包裝的確讓我點擊一個拇指改變壽）

我引用此頁面： http://jquery.malsup.com/cycle2/demo/caro-pager.php

下面的代碼是我添加click事件改變＃幻燈片放映1幻燈片的嘗試。

此外，它看起來像幻燈片號碼是不一樣的。我的控制檯裏總共有5個幻燈片號碼。如果我可以如何獲得2個單獨的幻燈片實例，它可能會幫助我。

讓我知道是否有什麼不清楚。

$(function(){ 

    var slideshow = $("#slideshow-1 #cycle-1"); 

     $('#slideshow-2 .cycle-slide').click(function(){ 
      var index = $('#cycle-2').data('cycle.API').getSlideIndex(this); 
       console.log(index); 
      slideshow.cycle('goto', index); 
     }); 
}); 

<!-- Main Slideshow --> 
<div id="slideshow-1"> 
    <div id="cycle-1" class="media_wrapper cycle-slideshow" 
     data-cycle-fx="fade" 
     data-cycle-timeout="0" 
     data-cycle-slides="> div.media_slide"> 
     <!-- Choices --> 
     <div class="media_slide"> 
      <!-- Video Link --> 
      <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4"> 
       <div class="media_image"> 
        <img src="images/slide1_clay.jpg" /> 
       </div> 
      </a> 
     </div> 

     <!-- Choices --> 
     <div class="media_slide"> 
      <!-- Video Link --> 
      <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4"> 
       <div class="media_image"> 
        <img src="images/slide2_person.jpg" /> 
       </div> 
      </a> 
     </div> 

     <!-- Choices --> 
     <div class="media_slide"> 
      <!-- Video Link --> 
      <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4"> 
       <div class="media_image"> 
        <img src="images/slide3_persons.jpg" /> 
       </div> 
      </a> 
     </div> 
     <!-- /slideshow --> 

    </div> 
</div> 

     <!-- Thumbnails --> 
    <div id="slideshow-2">  
     <div id="cycle-2" class="thumbs cycle-slideshow" 
      data-cycle-fx="carousel" 
      data-cycle-carousel-vertical="true" 
      data-cycle-timeout="0" 
    data-cycle-carousel-visible="3" 
    data-cycle-carousel-fluid=true 
    data-allow-wrap="true" 
      data-cycle-slides="> div" 
      data-cycle-next=".cntrl .cycle-next"  
      > 

      <div><img class="item set_one" src="images/thum1_clay.jpg" width="209" height="127"/></div> 
      <div><img class="item set_two" src="images/thum2_chris.jpg" width="209" height="127"/></div> 
      <div><img class="item set_three" src="images/thum3_tom.jpg" width="209" height="127"/></div> 

     </div> 

     <div class="cntrl">   
     <!-- Remove class 'none' when more slides are added --> 
     <a href="#" class="cycle-next">Next &raquo;</a> 
    </div> 

    </div> 

謝謝！

Answer 1

通過添加幾行jquery解決了我的問題。

• 檢查循環傳送帶是否已到達末端（有class .disabled）。
• 轉到幻燈片0（0 based），然後將轉盤推回到頂部。
• 確保所有幻燈片都可見。

 

$(".cycle-next").click(function(){ 
    if ($(".cycle-next").hasClass('disabled')) { 

    // Manually go to go the begining of the slideshow 
    $(".cycle-slideshow").cycle('goto', 0); 
    // Push carousel to first slide 
    $(".cycle-carousel").animate({ 
     top: 0 
    },1500); 

    $(this).removeClass("disabled"); 

    $(".cycle-slide").css('opacity','1'); 
} 
}); 

Answer 2

瓦謝，我用你的代碼與兩個「循環分組」輕微的修改和「週期下一個」鏈接。出於某種原因，當cycle-prev鏈接觸發.cycle（'goto'，5）[因爲傳送帶中有6個元素]，插件會立即添加，然後從循環下一個錨點中移除'disabled'類。即使我手動添加類，它也會立即刪除，從而導致「循環下一個」事件處理程序無用。

這是我毫無價值的代碼。

  $("a.cycle-next").click(function(){ 
       if ($("a.cycle-next").hasClass('disabled')) { 
        $(this).removeClass("disabled"); 
        $(".slideshow").cycle('goto', 0); 
       } 
      }); 

      $("a.cycle-prev").click(function(){ 
       if ($("a.cycle-prev").hasClass('disabled')) { 
        $("a.cycle-next").addClass("disabled"); 
        $(this).removeClass("disabled"); 
        $(".slideshow").cycle('goto', 5); 
       } 
      }); 

隨意給我狗屎，如果這是張貼錯誤的方式。