1

レスポンシブ画像カルーセルを作成しようとするたびに、絶対配置を使用して、ある時点で HTML のフローから画像を取り出す必要があります。

現在の画像がコンテナーの 100% 幅であるカルーセルを作成することはできませんか?カルーセルを一緒に無視して、画像の後ろの左上隅のファンキーな位置になってしまいませんか?

次の HTML を検討してください。

<div id="featured">
<div id="featured-title">
    Title
</div>
<div id="featured-images">
    <div class="featured-images-image">
        <img src="lib/imgs/fi-1.jpg"/>
    </div>
    <div class="featured-images-image">
        <img src="lib/imgs/fi-1.jpg"/>
    </div>
</div>
<div id="featured-content">
    <div id="featured-content-text">
        <h3>
            Title
        </h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel enim id massa suscipit vehicula non sit amet augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nisi urna, volutpat nec justo vel, rhoncus fermentum dolor. Integer pharetra, lectus eget auctor consectetur, tellus mauris gravida eros, nec porta augue tortor ac nibh. Fusce aliquam vel risus vitae luctus. Etiam lacinia ultricies tellus, nec venenatis magna viverra eu. Etiam tincidunt nibh hendrerit tincidunt ullamcorper. Nunc non urna congue, ultrices lacus sollicitudin, pellentesque ante. Etiam mi leo, sollicitudin ac tempus a, semper eu justo. Donec eget elementum dolor. Proin non tellus facilisis, suscipit velit eu, imperdiet urna. Proin non nulla suscipit, cursus tellus eleifend, tristique justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis luctus velit et pellentesque faucibus.
        </p>
    </div>
</div>
</div>

最初の画像の幅を 100% にして、2 番目の (およびその他の) 画像をアニメーション化する準備ができている状態で非表示にしながら、その下のテキストがカルーセル領域の下に留まるようにドキュメントの流れの中にとどまるにはどうすればよいでしょうか。 .

これは可能ですか？HTML の専門家が、このマークアップ言語でプロットを完全に見失っていないことを、私はまだ理解していません。包含要素の幅と高さを明示的に強制する場合、画像がフローから取り出されることを心配する必要がないことは理解していますが、ここでは応答性が重要です。

4

1 に答える 1

0

私が過去に使用したレスポンシブ カルーセルはFlexsliderで、画像に基づいてサイズが変更されるため、小さなデバイスでは縮小されます。チェックしてみる価値があるかもしれません。

于 2013-07-31T08:03:52.837 に答える