0

これが私の現在のプロジェクトのデモンストレーションです。

私が経験している主な問題は、市場で購入したメインのスライダーとその配置に関連しています。スライダーの上にナビゲーションを重ねるこの効果を実現したかったのですが、これはある程度機能しているように見えますが、できません個々のスライドの実際の箇条書きをクリックします。

また、インフォボックス (各スライドのキャプション) に関して問題があり、異なるコンピューター (ノートブックと PC) を使用している場合、異なる位置にあるように見えます。このキャプション ボックスを修正して、ロゴに合わせて？

スライダーのコード:

<div id="full-width-slider" class="royalSlider heroSlider rsMinW">
  <div class="rsContent">
    <img class="rsImg" src="img/slider/1.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
      <h4>This is an animated block, add any number of them to any type of slide</h4>
      <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
    </div>
  </div>

  <div class="rsContent">
    <img class="rsImg" src="img/slider/2.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
      <h4>This is an animated block, add any number of them to any type of slide</h4>
      <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
    </div>
  </div>
</div>
4

1 に答える 1

0

CSS でz-index: 0;on #full-width-slider(83 行目の style.css) を削除します。これは、開発ツールを介して修正されます。

別の解決策 (ソースの順序とスタックの問題を掘り下げる必要がないもの) は、オーバースタックされた#headersection 要素の高さを減らし、適用margin-bottomして、下から箇条書きにアクセスできるようにすることです (微調整が必​​要になる場合があります)。以下の実際の値):

    #header {
    height: 450px;
    max-height: 450px;
    position: relative;
    margin-bottom: 30px;
    }

それがうまくいくことを願っています！

于 2013-10-16T03:59:18.440 に答える