I have created a carousel that is functioning correctly. However, I am encountering an issue with making it fully responsive. It appears to work properly in webkit browsers, but there are some issues in Firefox. Despite the images resizing properly, the width of the li elements remains the same as the original image size, resulting in large gaps between the images.
.carousel{
height:100%;
}
.carousel ul {
overflow:hidden;
white-space:nowrap;
margin:0; padding:0;
list-style:none;
position:relative;
height:100%;
background:#99F;
}
.carousel li {
display:inline-block;
background:#FFC;
height:100%;
}
.carousel li img{
height:100%;
}
<div class="carousel">
<ul>
<li><img src="car" /></li>
<li><img src="boat" /></li>
<li><img src="train" /></li>
<li><img src="car" /></li>
<li><img src="boat" /></li>
<li><img src="train" /></li>
</ul>
</div>