/ / Cycle2カルーセルのサムネイルをクリックしてコンテンツを表示-javascript、jquery、html

Cycle2カルーセルサムネイルをクリックしてコンテンツを表示する - javascript、jquery、html

http://jsfiddle.net/r29A9/4/

実際のサイト: http://sebastiangraz.com/projects/kbt/

(機能を確認するには、下の次のdivをクリックしてください)

こんにちはすべて私はわずかな問題を抱えています。 Cycle2を使用して一部のコンテンツをスライドさせていますが、現在は希望どおりに機能しています(上記のフィドルを確認してください)。ただし、各サムネイル(丸いシアン/青の円)一度クリックしたコンテンツ。

さらに明確にするために: 基本的に2つのスライド(1つのテキストと1つの円形のサムネイル)があり、次と前のdivで制御しています。したがって、円形のdivをクリックすると、対応するテキストをスライドさせます。

このページの下でこれを切り取ったことがわかりました: http://jquery.malsup.com/cycle2/demo/caro-pager.php 機能をコピーしたいものです。そして、私はそれを現在のセットアップと統合しようとしましたが、何の役にも立ちませんでした。

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

$("#cycle-2 .cycle-slide").click(function(){
var index = $("#cycle-2").data("cycle.API").getSlideIndex(this);
slideshows.cycle("goto", index);
});

アイデアはありますか?ありがとうございました!

回答:

回答№1は6

あなたの問題を解決する私が作成したフィドルの下を見つけてください

フィドル

($("#carousel1 .readmore").length - 1)

プラグインは表示されている現在のセクションであるセクションをもう1つ追加するため、使用しているスライドの数をカウントします。