0

AnytingSlider expand と resizecontents を一緒に使用しようとすると、スライドの高さが 2px に下がります。resizecontent がなければ、真のスライドが正しく表示されます。CSSで高さを設定し、jsの中を見ましたが、なぜこれが起こっているのか分かりません

CSS

#slider1 {
    width: 700px;
    height: 280px;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}


body
....
<div class="box">
  <div id="banner-full">
    <div id="page-wrap">
       <div id="hover">
         //...some hover over slider...//
       </div>
       <div class="anythingSlider anythingSlider-metallic activeSlider" style="width: 617px; height: 2px;">
          <div class="anythingWindow" style="width: 100%; height: 100%;">
            <ul id="slider1" class="anythingBase horizontal" style="width: 3085px; left: -617px;">
              <li class="cloned panel" style="width: 617px; height: 2px;">
              <li class="panel activePage" style="width: 617px; height: 2px;">
              <li class="panel" style="width: 617px; height: 2px;">
              <li class="panel" style="width: 617px; height: 2px;">
              <li class="cloned panel" style="width: 617px; height: 2px;">
            </ul>
          </div>
        <div class="anythingControls" style="display: block;">
            //...some controls html...//
        </div>
      </div>
    </div>
  </div>
</div>
....
4

1 に答える 1

0

expandオプションをご利用の場合は、

$('#slider').anythingSlider({
    expand: true
});

ドキュメント本体ではない要素でスライダーをラップする必要があります ( demo ):

<div class="wrapper">
    <ul id="slider">
        <li><img src="http://placekitten.com/500/200" alt="" /></li>
        <li><img src="http://placehold.it/500x200" alt="" /></li>
        <li><img src="http://placebear.com/500/200" alt="" /></li>
        <li><img src="http://lorempixel.com/500/200" alt="" /></li>
        <li><img src="http://placedog.com/500/200" alt="" /></li>
    </ul>
</div>

あとは、次のサイズを定義するだけです.wrapper。

.wrapper {
    width: 80%;
    height: 200px;
    margin: 20px auto;
}
于 2013-02-06T23:01:37.310 に答える