1

Foundation 4 と Orbit スライダーを使用しています。コンテンツスライダーとして使いたいです。

Orbit の余白を台無しにすることなく、Foundation の行を Orbit スライダーに入れることは可能ですか?

<ul data-orbit>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Hallo</h1>
            </div>
        </div>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Doei</h1>
            </div>
        </div>
        <img src="img/slider/1.jpg">        
    </ul>

3 つのスライダー項目があります。行クラスを含む 2 つの div と 1 つの全幅画像。この例では、クラス行の余白が乱れています。マージンを追加して、行クラスを持つ div が中央に配置されるようにします。

4

1 に答える 1

0

あなたの質問をよく理解しているかどうかはわかりませんが、3 つのスライド (大画面の中央にテキストが 2 つ、画像が 1 つ) が必要な場合は、このコードが機能するはずです (ただし、テストはしていません)。

.large-centeredクラスをタグに追加する<li>と、テキストが自動的に中央に配置されるため、css の余白を気にする必要はありません。

<div class="row">
  <div class="large-12 columns">
    <div class="orbit-container">
      <ul data-orbit="">
        <li class="row">
          <div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
        </li>
        <li class="row">
            <div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
        </li>
        <li><img src="img/slider/1.jpg" alt=""></li>        
      </ul>
    </div>
  </div>
</div>
于 2013-10-30T20:51:37.157 に答える