jquery - Cycle2 状態は常に false

Question

Cycle2 スライドショーがあります。5 秒ごとにスライドを循環させたいのですが、ユーザーが上下のキーをクリックしてスライドを進められるようにしたいのです。上または下のキーがクリックされたとき、次または前に進む前にスライドショーがビジーでないことを確認したい。問題は、.cycle-busy をチェックすると、毎回 false が返されることです。スライドショーを一時停止に設定し、上下キーのクリックで .cycle-paused をチェックしようとしましたが、それも false を返します。何か不足していますか？

jquery 1.8.2 を使用しています。

$(document).keydown(function (e) {
    var busy = $('#mainSlideShow').is('.cycle-busy');
    alert(busy);
    if ($('.cycle-slideshow').is(':animated'))
        return false;

    switch (e.which) {
        case 38:
            $('.cycle-slideshow').cycle('next');
            break;

        case 40:
            $('.cycle-slideshow').cycle('prev');
            break;
    }
});

<div id="mainSlideShow" >
    <div class="cycle-slideshow"
        data-cycle-timeout="5000"
        data-cycle-slides="> div"
        data-cycle-fx="scrollVert"
        data-cycle-prev=".prev"
        data-cycle-next=".next"
        data-cycle-paused="false">
        <div class="slide" style="background-image: url('Images/SlideShow/building.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/farm.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/family.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/house.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
    </div>
</div

Answer 1

ビジーの値は、スライドショーのオプション ハッシュに含まれています。この値にアクセスするには、次のメソッドを使用します。

var opts = $('.cycle-slideshow' ).data( 'cycle.opts'); 
if(opts.busy){
    return false;
}