4

プロジェクトに Foundation 4.3.0 を使用しており、最も基本的な方法で Orbit をセットアップしようとしています。JavaScript と CSS が正しく読み込まれ、画像が読み込まれ、余分な要素がすべて挿入されているように見えますが、メイン<ul>の高さは常に 0px です。ここに私のHTMLがあります：

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <ul data-orbit="">
                <li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                <li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
            </ul>
        </div>
    </section>
</div>

HTML は次のようになりますfoundation.orbit.js。

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <div class="orbit-container orbit-stack-on-small">
                <ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                    <li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                </ul>

                <a href="#" class="orbit-prev">Prev <span></span></a>
                <a href="#" class="orbit-next">Next <span></span></a>

                <div class="orbit-slide-number">
                    <span>1</span> of <span>2</span>
                </div>

                <div class="orbit-timer">
                    <span></span>
                    <div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
                </div>
            </div>

            <ol class="orbit-bullets">
                <li data-orbit-slide-number="1" class="active"></li>
                <li data-orbit-slide-number="2" class=""></li>
            </ol>
        </div>
    </section>
</div>

画像に明示的な幅と高さをclass="active"設定したり、HTML を生成するときに 1 つのスライドに配置したり、さまざまな Foundation 設定を変更したりしようとしましたが、何もうまくいかないようです。

HTML を Foundation ドキュメントの実際の例と比較すると、実際のバージョンでは az-indexが常にスライド上で動的に設定されていることがわかります。私のサイトでは、noz-indexは設定されていません。そしてもちろん、ul作業バージョンの には、スライドの高さに等しいインライン CSS の高さがあります。

高さを手動でul300px に設定すると、画像が表示されないことを除いて、すべてが正しく表示されます。に設定div.orbit-containerするoverflow: visibleと、スライドの 1 つの端がコンテナの左側に表示されます。

どんなアイデアでも大歓迎です。

4

4 に答える 4

1 
.orbit-container { height:auto; }  

.orbit-container .orbit-slides-container > * {
  position: relative;
  margin-left: 0;
  float: left;
  height: 100%;
}

以前のソリューションからの少しのアップグレード。この変更により、スマートフォンとデスクトップでスライドショーをより簡単に表示できるようになります。

于 2015-05-28T12:16:37.517 に答える
0

私は同じ問題を抱えていましたが、foundation.min.css を使用する代わりに個々のモジュール (私はコンパスを使用しています) を使用すると問題が解決することがわかりました。

于 2013-08-21T13:43:17.433 に答える
0

画像のURLは大丈夫ですか？私は同じ問題を抱えていましたが、3枚の画像のうち2枚で、問題はURLにありました

于 2013-08-05T21:28:07.297 に答える