my question is basically the same as this: CSS: Horizontally scrolling image inside variable width div?.
I have a container Div that has Width:auto;, inside that I have a div with 4 rows of 150px by 150px images with a variable width. I would like to have the images take up the maximum height and overflow horizontally. I don't mind if I must use JavaScript, but would like to avoid it if possible.
css:
#slide1_controls span {
padding-right:2em;
cursor:pointer;
}
#slide1_container {
height:650px;
width:auto;
position:relative;
overflow:hidden;
}
#slide1_images {
position: absolute;
overflow-x: scroll;
background-color:black;
left:0px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
#slide1_images img{
padding:4px;
margin:0;
float:left;
}HTML:
<div id="slide1_container">
<div id="slide1_images">
<div id="panel">
<a><img src="0" width="154" height="154"></a>
<a><img src="1" width="154" height="154"></a>
<a><img src="2" width="154" height="154"></a>
<a><img src="3" width="154" height="154"></a>
<a><img src="4" width="154" height="154"></a>
<a><img src="5" width="154" height="154"></a>
<a><img src="6" width="154" height="154"></a>
<a><img src="7" width="154" height="154"></a>
<a><img src="8" width="154" height="154"></a>
<a><img src="9" width="154" height="154"></a>
<a><img src="10" width="154" height="154"></a>
<a><img src="11" width="154" height="154"></a>
<a><img src="12" width="154" height="154"></a>
<a><img src="13" width="154" height="154"></a>
<a><img src="14" width="154" height="154"></a>
<a><img src="15" width="154" height="154"></a>
<a><img src="16" width="154" height="154"></a>
<a><img src="17" width="154" height="154"></a>
<a><img src="18" width="154" height="154"></a>
<a><img src="19" width="154" height="154"></a>
<a><img src="20" width="154" height="154"></a>
<a><img src="21" width="154" height="154"></a>
<a><img src="22" width="154" height="154"></a>
<a><img src="23" width="154" height="154"></a>
<a><img src="24" width="154" height="154"></a>
</div>
</div>
</div>
<p id="slide1_controls">
<span id="slide1-1">Image 1</span>
<span id="slide1-2">Image 2</span>
<span id="slide1-3">Image 3</span>
<span id="slide1-4">Image 4</span>
</p>
$(document).ready(function() {
$("#slide1-1").click(function() {
$("#slide1_images").css("left","0");
});
$("#slide1-2").click(function() {
$("#slide1_images").css("left","-450px");
});
$("#slide1-3").click(function() {
$("#slide1_images").css("left","-900px");
});
$("#slide1-4").click(function() {
$("#slide1_images").css("left","-1350px");
});
});