0

iossliderを使用していますが、スライダーに一度に1つの画像しか表示されないようです。また、表示されている単一の画像を中央に配置しようとしています。これが私がHTMLのために持っているものです：

HTML：

<div class = 'iosSlider'>
    <div class = 'slider'>
        <div class="item">
            <img src="/images/nature1.png" />
        </div>
        <div class="item">
            <img src="/images/nature2.png" />
        </div>
    </div>
</div>

私のCSSは次のようになります。

.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;

width: 100%;
height: 300px;

border: solid 1px #ff0000;
}

/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}

/* slide */
.iosSlider .slider .slide {
/* required */
float: left;

width: 100%;
height: 100%;
}

.iosSlider .slider .item img {
width: auto;
height: 300px;

border: solid 1px #00ff00;  
}

基本的に、スライダーに一度に1つの中央の画像だけを表示しようとしています。以下は私が現在見ているものです。ご覧のとおり、右の画像も表示されています。

CSSでこれを行う方法はありますか？

ウィンドウのサイズを変更してみてください。私の問題が表示されます。私はこれを320x480の解像度のモバイルウェブページで実行しています。

ここに画像の説明を入力してください

4

2 に答える 2

0

わかりました、ここで javascript または jQuery を使用して、一連の画像をループします。jQuery関数が次のように選択したときに、中央またはフォーカスされた画像に別のクラスを追加します<div class = 'iosSlider'> <div class = 'slider'> <div class="item current"> <img src="/images/nature1.png" /> </div> <div class="item"> <img src="/images/nature2.png" /> </div> </div> </div>

次の画像がフォーカスされたら、このクラス「現在」を最初の画像から削除し、2 番目の画像に適用します。そして、このクラスの現在のリンクallign: center; margin-left:auto; margin-right:auto;とその他の必要な css の css を作成します。

于 2012-12-03T14:25:54.780 に答える
0

画像の幅/高さを 100% にすると、絶対に配置することもできます。

 .iosSlider .slider .item img {
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
     border: solid 1px #00ff00;  
}
于 2012-12-03T14:23:16.307 に答える