0

設定したスライダーがあります。画像をオーバーフローさせずに全画面表示にするのに苦労しています。また、垂直方向の中央に配置し、ナビゲーションドットを画面の一番下に保ちます。

これについて私が得ることができるどんな助けも大歓迎です。

これはサイトの URL です。

http://www.klossal.com/js/wmuSlider/demo/demo3.html

これがコードです

HTML:

<div style="top:50%;">

<div class="wmuSlider example1">
<div class="wmuSliderWrapper" style="height:100%;">
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_1_header.png"  
/>
</article>
<article>
<img width="612" height="612" src="http://www.klossal.com/portfolio/space_2_header.png" 
/>
</article>
<article>
<img width="612" height="612"     
src="http://farm6.static.flickr.com/5201/5296457034_5688b25c15_z.jpg" />
</article>
<article>
<img width="612" height="612"    
src="http://farm6.static.flickr.com/5245/5291874922_35ca47cc3d_z.jpg" />
</article>
</div>
</div>


</div>
<script>
    $('.example1').wmuSlider({
        touch: Modernizr.touch,
        animation: 'slide',
        slideshow: false
    });
</script>

およびCSS:

/* Demo */
.wmuSlider,
.wmuGallery {
margin-bottom: 20px;
}

/* mwuSlider */
.wmuSlider {
position: relative;
overflow: hidden;
}
.wmuSlider .wmuSliderWrapper {
display: none;
}
.wmuSlider .wmuSliderWrapper article {
position: relative;
text-align: center;
}
.wmuSlider .wmuSliderWrapper article img {
max-width: 100%;
height: auto;
}

/* mwuGallery */
.wmuGallery .wmuGalleryImage {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage img {
max-width: 100%;
height: 100%;
}

/* Default Skin */
.wmuGallery .wmuGalleryImage {
margin-bottom: 10px;
}
 .wmuSliderPrev, .wmuSliderNext {
position: absolute;
width: 40px;
height: 80px;
text-indent: -9999px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0 0;
top: 50%;
margin-top: -40px;
z-index: 2;
}
.wmuSliderPrev {
background-position: 100% 0;
left: 20px;
}
.wmuSliderNext {
right: 20px;
}
.wmuSliderPagination {
z-index: 2;
position: absolute;
left: 50%;
bottom: 0px;
}
.wmuSliderPagination li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
.wmuSliderPagination a {
display: block;
text-indent: -9999px;
width: 10px;
height: 10px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0   
-80px;
}
.wmuSliderPagination a.wmuActive {
background-position: -10px -80px;
}

body{
background:#141414;
}
4

1 に答える 1

0

概要はこちら

コンテナがあります -- <div class="wmuSlider">-- このコンテナの高さは612px

次に、スライダー イメージのラッパーを作成します -- <div class="wmuSliderWrapper">-- この要素の高さは 100% に設定されています。つまり、ページ ラッパーの高さ -- <div class="wmuSlider">-- 612px が使用されます。

したがって、まだスペーシングはまったくなく、ラッパーの正確な寸法に拘束されます。続けましょう。

あなたには が<article>あり、それぞれ<article>に<img>-- これらの画像の高さは - ご想像のとおり -612pxです。

したがって、画像は周囲のすべてのコンテナと同じ高さになります。

最後に があり<ul class="wmuSliderPagination">ます。この要素は、要素の下部に配置されます<div class="wmuSliderWrapper">。ただし、画像の高さはラッパーと同じであるため、<ul class="wmuSliderPagination">では612px、z-index:2.

ページネーションに問題がないようにこれを変更したい場合は、いくつかのことを行うことができます。

<div class="wmuSliderWrapper">からの高さを変更して100%、 - > のよう98%に追加できます。overflow:hidden;

.wmuSliderWrapper{
  height:98%;
  overflow:hidden;
}

ただし、これは画像の下部を切り取ってしまうため、そうしたくない場合があります。代わりに、 の全体的な高さを変更し、の高さを固定<div class="wmuSlider">の高さに設定できます。<div class="wmuSliderWapper">

.wmuSlider{
  height:632px; //20px is the average line-height of a single element
}
.wmuSliderWrapper{
  height:612px;//give 20pxs of room for the pagination wrapper
}

あなた<img>の は幅と高さをハードコーディングしているので、上記の解決策では、その問題に再び遭遇することはありません。ただし、ある時点で画像の高さが異なる場合は、含める必要があります

.wmuSliderWrapper{
  height:612px;
  overflow:hidden; // stop any element that has dimensions larger than the container from overflowing
}
于 2012-07-09T17:04:51.720 に答える