Question

I’m using iosslider but can’t seem to show just one image in the slider at a time. I’m also trying to center the single image shown. Here is what I have for 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>

My CSS looks like this:

.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;  
}

I’m basically trying to show just one centered image at a time in the slider. Below is what I currently see. As you can see the image to the right is also shown.

Any idea how I can do this with my CSS?

Try resizing the window and you’ll see my issue. I’m running this on a mobile webpage that has 320×480 resolution.

Answer 1

Give the images width/height of 100% and you can also position them absolutely:

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