jQuery Cycle2 - 傳送帶尋呼機導航

我正在使用Cycle2的傳送帶尋呼機，與example here非常類似的設置。jQuery Cycle2 - 傳送帶尋呼機導航

我的問題是，上一個和下一個滑塊工作正常，但點擊旋轉木馬不會改變其他滑塊中的幻燈片。它在上面鏈接的Cycle2示例中工作。

檢查JS在小提琴：

例子中的CSS被打破，但沒關係，你可以看到的問題是什麼。如果您點擊下一步它會循環，但單擊傳送帶中的圖像不會更改滑塊。

我總是在控制檯收到錯誤消息：

[cycle2] goto: invalid slide index

來源

2014-01-14 Paul Redmond

如果您查看旋轉木馬所做的DOM修改，您會看到您的幻燈片包含原始圖像集的三個副本，從而丟棄您的數字。 – Blazemonger

感謝您的回覆。我注意到，cycle2的開發者已經指出，傳送帶創建的幻燈片數量是實際存在的幻燈片的3倍。那麼如何將這些幻燈片與創建的幻燈片連接在一起？ –

我以兩種方式解決了這個（幾乎....）

加入data-cycle-allow-wrap="false"至轉盤尋呼機容器。這似乎是現在充分證明，

我開始結果具有無限尋呼機從演示頁

var slideshows = $('#gallbig'); 

    var adjust = slideshows.children('img').length; 

    $('#no-template-pager .cycle-slide').click(function(){ 
     var index = $('#no-template-pager').data('cycle.API').getSlideIndex(this); 
     slideshows.cycle('goto', index - adjust); 
    });

改變標準的jQuery但一旦環繞，如失敗我不需要這個功能，我已經選擇了一個，但是如果你在無限輪播之後，這可能會讓你開始。

注意我現在使用的第一個修復程序具有相同的jQuery片段，但沒有調整var。

來源

2014-01-15 10:34:24 pushplaybang

我要將第一個數字標記爲答案。感謝那。我以爲我曾嘗試過，但我一定有其他錯誤。不錯的工作！ –

很酷，我見過一些人爲此付出了很多努力 - 很多時候，因爲他們在數據屬性中忽略了-cycle。 – pushplaybang

我知道我有點遲到了，但想我會分享我自己的解決方案與data-cycle-allow-wrap集這裏有2個問題工程true

。第一種是當data-cycle-allow-wrap設置爲true重複的滑過.click()回調函數永遠不會

其次，由Blazemonger提到的重複拋出了索引每張幻燈片

解決方案

首先，我在下面的標記中爲每張幻燈片設置一個「索引」數據屬性。當插件複製幻燈片它需要的數據與它在JavaScript沿屬性

<?php 
    $i = 0; 
    foreach($images as $image) { 
     echo '<img class="cycle-slide" data-index="' . $i . '" src="' . $image . '" />'; 
     $i++; 

    } 
?>

然後，而不是使用.click()方法我用.on()趁着event delegation並得到了數據的索引屬性，而不是什麼從插件返回：

$('#cycle2').on('click', '.cycle-slide', function(){ 
    $('#cycle1').cycle('goto', $(this).data('index')); 
});

來源

2014-04-13 18:35:08 Andy

感謝這一點，爲傳送帶尋呼機和無限循環提供了絕妙的解決方案。 –

我剛看到這跟我自己的旋轉木馬尋呼機掙扎後，所以這裏是我做什麼，希望它可以幫助人在那裏：（從尋呼機傳送帶例如在循環2網站的一些代碼）

$(document).ready(function(){ 

    // Cycle2 Slider: 
    var slideshows = $('.cycle-slideshow');//selects both slideshows 
    slideshows.on('cycle-next cycle-prev', function(e, opts) { 
     // advance the other slideshow 
     slideshows.not(this).cycle('goto', opts.currSlide); 
    }); 

    $('.carousel .cycle-slide').click(function(){ 
     var index = $('.carousel').data('cycle.API').getSlideIndex(this); 
     var slide_count = $('.carousel').data("cycle.opts").slideCount; 

     // subtract the slide amount until the slide count is within bounds: 
     while(index > slide_count) { 
      index = index - slide_count; 
     } 
     slideshows.cycle('goto', index); 
    }); 

});

來源

2016-05-13 13:48:33

jQuery Cycle2 - 傳送帶尋呼機導航

回答

相關問題