While working on a jQuery sliding list to display a series of images one after the other, I encountered an issue. When manually testing the movement of an image to reveal the next one, it wasn't displaying correctly and the reason behind this is eluding me. Below is the HTML snippet for reference:
<div id="slider">
<ul class="pages">
<li class="page">
<a href="article.html" >
<img src="images/iphone-5s2.jpg" alt="an iPhone 5S">
</a>
</li>
<li class="page">
<a href="#" >
<img src"images/network-cables2.jpg" alt="Network cables">
</a>
</li>
<li class="page">
<a href="#" >
<img src"images/black-keyboard2.jpg" alt="Close up of a black keyboard">
</a>
</li>
</ul>
Here are the relevant CSS styles:
#slider{
width:900px;
height:500px;
overflow:hidden;
}
#slider .pages {
display: block;
width: 5000px;
height: 500px;
margin: 0;
padding: 0;
}
#slider .page {
float: left;
list-style-type: none;
width: 900px;
height: 500px;
}
Attached is a screenshot showing the issue with displaying the second image:1
All images mentioned are stored in the same folder, and even when altering their order, only the first one loads correctly every time.