0

オービットスライダーでファンデーションフレームワークを使用しようとしましたが、ブラウザーでテストすると、スライダーがトランジションを実行しますが、アニメーションは実行されず、1つのセクションから別のセクションにフェードインします。

ウィンドウのサイズを変更しようとした場合にのみ、期待どおりに機能します。

さらに詳しく調べた後、スライダーが「horizo​​ntal-push」を使用して変更しようとすると、軌道スライドdivの変数this.outerWIdthは、実際のdivの幅ではなく1になります。

これが、オービットを使用している機能スライダーのマークアップです。

<div id="features-wrap" class="wrapper">
            <!-- Insert Features Here -->
            <div id="features-gutter" class="row">
                <section id="features" class="row">
                    <div id="welcome">
                        <div class="eight columns">
                            <h4>Welcome</h4>
                            <p>Hello.</p>
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                    <div id="decorated">
                        <div class="eight columns">
                            <h4>Decorated Apparel</h4>
                            <p>Some Text</p>
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                    <div id="promotional">
                        <div class="eight columns">
                            <h4>Protional Products</h4>
                            <p>Some Text</p>  
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                </section>
            </div>
            <!-- End Insert Features Here -->
        </div>

コードの終わりこれは私が呼んでいるJavascriptでもあります。

var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });

私がコードで行っていることはありますか、それとも軌道の現在のスクリプトのバグですか？

ありがとう。

4

1 に答える 1

0

答えが見つかりました。スライダーが正しいouterWidthを取得するために、スライダーを初期化するdivに移動し、cssファイルのプラグインによって設定された幅を上書きする必要がありました。例：機能が軌道スライダーを制御する場合、これを行う必要があります：

#features {
    width: <set the width here> !important;
    <any other styles here>
}

ありがとう

于 2012-11-09T02:23:14.513 に答える