jquery - Jquery Animation cloud9 カルーセルにアクティブなクラスを追加

Question

ここでhttp://specious.github.io/cloud9carousel/スライダーを使用しています。画像が前面で回転するときにアクティブなクラスを追加したいと思います。

Answer 1

多くの要望により、バージョン 2.2.0 の時点で、frontItemClassプロパティを介して選択したクラス名を提供すると、自動的に最前面の項目にタグが付けられます。

var carousel = $("#carousel")

carousel.Cloud9Carousel({
  // ...
  frontItemClass: "active"
})

JS Bin でのライブデモ。

Answer 2

「onRendered」コールバック関数を追加できます。私はそれを使用し、私のために働いています

var showcase = $("#showcase")
var card = $("#showcase .card")
showcase.Cloud9Carousel( {
        yOrigin: 42,
        yRadius: 40,
        itemClass: "card",
        buttonLeft: $(".nav2.prev"),
        buttonRight: $(".nav2.next"),
        bringToFront: true,
        onRendered: showcaseUpdated,
        onLoaded: function() {
          showcase.css( 'visibility', 'visible' )
          showcase.css( 'display', 'none' )
          showcase.fadeIn( 1500 )
        }
      } )
      function showcaseUpdated( showcase ) {
        $(card).removeClass('active');
        var index = showcase.nearestIndex();
        $(showcase.items[index].element).addClass('active');
      }