如何仅显示一个图像并将其置于滑块中心？

Question

我正在使用iosslider但似乎无法在滑块中一次只显示一个图像。我也试图将显示的单个图像居中。以下是我对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;  
}

我基本上试图在滑块中一次只显示一个居中的图像。以下是我目前看到的内容。如您所见，也会显示右侧的图像。

知道如何用我的CSS做到这一点吗？

尝试调整窗口大小，您会看到我的问题。我在拥有320x480分辨率的移动网页上运行此功能。

Answer 1

将图像宽度/高度设为100％，您也可以绝对定位它们：

 .iosSlider .slider .item img {
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
     border: solid 1px #00ff00;  
}

Answer 2

好的，有一件事在这里使用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>

时，将另一个类添加到居中或聚焦的图像中

当下一张图像聚焦时，从第1张图像中删除此类“当前”并应用于第2张，依此类推。 并且这个班级的当前谎言allign: center; margin-left:auto; margin-right:auto;以及其他必要的css。