How do I show just one image and center it in a slider?

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 320x480 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;  
}

Answer 2

Ok do one thing use javascript or jQuery here to loop through your set of images. Now add another class to the centered or focused image when jQuery function selects it like <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>

and when the next image got focus, remove this class "current" from 1st image and apply to 2nd one and so on. And wrtite css for this class current liek allign: center; margin-left:auto; margin-right:auto; allign: center; margin-left:auto; margin-right:auto; and other necessary css.