I'm using [iosslider](https://github.com/iosscripts/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.

![enter image description here](https://i.stack.imgur.com/8bh26.jpg)