1

jQuery Cycle2 プラグインhttp://jquery.malsup.com/cycle2/demo/basic.phpを使用しています

現在のスライド/画像の幅を取得し、それを使用して別の要素の幅を設定する必要があります。

各画像の幅は異なる場合があり、それに応じてサイズを変更するには、画像の上にバーが必要です。

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg">
<img src="http://malsup.github.com/images/p2.jpg">
<img src="http://malsup.github.com/images/p3.jpg">
<img src="http://malsup.github.com/images/p4.jpg">
</div>

現在/アクティブなスライドの幅を取得するにはどうすればよいですか?

4

1 に答える 1

2

このプラグインがactive現在アクティブなイメージにクラスを追加するというヒントを得ることができます。したがって、次のようにして、目的の幅を取得できます。

var imgWidth = $(".cycle-slideshow").find("img.active").width();

次に、この幅の値を使用して、他の要素の幅を設定できます。

$("other element selector").width(imgWidth);

編集

あなたnextとprevボタンのHTMLは次のように見えると思います：

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

次に、次のことを行う必要があります。

$("#prev, #next").on('click', function() {
    var imgWidth = $('.cycle-slideshow').find(".cycle-slide-active").width();
    $(".topbar").width(imgWidth); 
});
于 2013-05-06T11:21:00.887 に答える