jquery-cycle2 - Cycle2 カルーセルで JQuery.BlackAndWhite を使用しますか?

Question

私は、Cycle2 ベースのカルーセルをまとめています。基本的に、他のすべての画像は白黒の画像でなければなりません。したがって、最初のロードでは次のようになります。

画像 A = 白黒
画像 B = カラー
画像 C = 白黒
画像 D = 非表示

スライドショーが進むと、次のようになります。

画像 A = 非表示 画像
B = 白黒
画像 C = カラー
画像 D = 白黒

class を追加して白黒変換を処理するGianluca Guarini のjQuery.BlackAndWhite.bwWrapperプラグインを発見しました。パラメータを使用するscrollHorzと、2 つがうまく連携しますが、を使用するとうまくいきませんcarousel。カルーセルは期待どおりに実行されますが、BlackAndWhite は機能しません。

私のコードは以下です。2 つのブロックの唯一の違いは、DIV にあることです。私の推測では、jQuery.BlackAndWhite が実行され(window).load、その後 Cycle2carouselが画像に入りますか?

これらを協力させる方法について何か考えはありますか？

<h3>Cycle2</h3>

<div id="slideshow">
  <a href="#" class="bwWrapper"><img src="/assets/images/img01.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img02.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img03.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img04.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img05.jpg" height="200" alt="test image"></a>
</div>

<div class="center">
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="/assets/js/jquery.cycle2.js"></script>
  <script src="/assets/js/jquery.cycle2.carousel.min.js"></script>
  <script src="/assets/js/jquery.BlackAndWhite.js"></script>

<script>
 $(window).load(function() {
    $('#slideshow').cycle({
        fx: 'carousel',
        speed: '1000', 
        slides: '> a',
        next: '#next',
        prev: '#prev'
    });

   $('.bwWrapper').BlackAndWhite({
         hoverEffect: false,
         invertHoverEffect: false
     });
  });
</script>