0

おそらく単純なものを見落としているのでしょうが、問題はブラウザ ウィンドウの幅が小さい場合です。オーバーレイ ドットが正しく配置されていません (画像の下部)。

注: HTML LI から「HEIGHT」属性を削除すると、画像は表示されません。 height:auto; で遊ぶ HTML/CSS で同じ結果が得られます。Max-height も同じ効果があります。

ハードコーディングされた HTML スタイルの高さを削除し、サイズに関係なく、常に画像の下部にドットを表示したいと考えています。

フィドル: http://jsfiddle.net/s3r8uuzz/

JavaScript ファイル:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//unslider.com/unslider.min.js" type="text/javascript"></script>

CSS:

.banner ul { 
  list-style: none; /* Lose the dot */
  margin:0px;
  padding:0px;
}

.banner li { 
  float: left; 
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0px;
  background-color: #353535;
  height: 35px;
  opacity: .7;
}

.dots li {
  position:relative;
  top:11px;
  left:-4px;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  text-indent: -999em;
  border: 2px solid #bc9a6a;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}

.dots li.active {
  background: #3e245b;
  opacity: 1;  /* opacity of the inside dot (not the border) */
}


#slider{
  position: relative;
}

HTML:

<div id="slider" style=""> 
    <div class="banner">
        <ul>
            <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="/testing"></a></li>
            <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="testing"></a></li>
        </ul>
    </div>
</div> 
<div>
    No matter the window size, this text should be directly under the image.
</div>
<script>
        // main image settings
        $('.banner').unslider({
                arrows: false,
                delay: 2000,
                fluid: true,
                speed: 1000,
                dots: true
        });

</script>
4

1 に答える 1

0

ドットに position:absolute を使用しています。ドットをページの本文ではなく親に適切に配置するには、現在 'slider' の ID を持つスライダー コンテナーに相対位置を指定する必要があります。

#slider { position: relative; }

これには、親コンテナー内のドットの絶対位置が含まれます。

于 2015-01-02T21:04:41.160 に答える