0

現在、自分用の Web サイトを作成していて、スタイリングに問題があります。デフォルトでは、スライダーの下にページネーション ボタンと、前と次の矢印があります。ページネーション ボタンを削除することはできましたが、次のボタンと前のボタンをスライダーの上に配置できません。これらのボタンは、含まれる画像の高さで垂直方向の中央に配置する必要があります。スライダーの高さも悩み中。高さは画像の高さでなければなりません。私のウェブサイトの緑色の部分は高すぎます。

誰かが私を助けてくれることを願っています！

事前にどうもありがとう！

http://test.epicconcepts.nl

<style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }

    #slides .slidesjs-container {
      margin-bottom:0px;
    }

    .slidesjs-pagination {
      display:  none;
    }
    .slidesjs-previous.slidesjs-navigation {
        /* Styles for the Previous nav button */
        width: 32px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        z-index: 99;
        background-image: url("..//img/prev.png");
    }

    .slidesjs-next.slidesjs-navigation {
        /* Styles for the Next nav button */
        width: 32px;
        height: 100px;
        background-color: red;
        position: absolute;
        right: 0;
        z-index: 99;
        background-image: url("..//img/next.png");
    }

    .slidesjs-control {
        background: orange;
        max-height: 0px;
    }

    .slidesjs-container {
        width: 100%;
        background: green;
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 700,
        autoHeight: true
      });
    });
  </script>
4

1 に答える 1

0

そのURLからslidesjsコードを削除したと思いますが、10分前にまったく同じ問題が発生していたので、これを修正しました： 

<div id="slides" class="slides">
  <img src="images/1.jpg">
  <img src="images/2.jpg">    
  <a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
    <img src="images/arrow-left.png" /></a>
</div>

簡単にするために、2 つの画像と 1 つのナビゲーション ボタンを配置しました。次に、CSS: 

.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
  position: absolute;
  top: 120px; /* the exact position over the slides, from slide's (0,0) */
}

ナビゲーション ボタンは<a class="slidesjs-previous slidesjs-navigation">直接内側に配置する<div id="slides">必要があります。そうしないと機能しません。Div を中央に配置しないでください。

于 2014-02-19T18:11:27.587 に答える