Sliding by adding padding (transitions)

Sliding by changing position : Sliding by adding padding (transitions)

Plan

1. Create a container with overflow set to hidden.
2. Inside that container, create another container with width equal to the width of all the images added together.
3. Inside that, float the images left with no padding or margin.
4. When clicking a control, change the left position of the second container to show the required image.

Code

Firstly, the mark up:

<div id="slide1_container">
	<div id="slide1_images">
		<img src="img1.jpg" />
		<img src="img2.jpg" />
		<img src="img3.jpg" />
		<img src="img4.jpg" />		
	</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>

The CSS:

#slide1_controls span {
	padding-right:2em;
	cursor:pointer;
}
#slide1_container {
	width:450px;
	height:281px;
	overflow:hidden;
	position:relative;
}
#slide1_images {
	position:absolute;
	left:0px;
	width:1800px;
	-webkit-transition:all 1.0s ease-in-out;
	-moz-transition:all 1.0s ease-in-out;
	-o-transition:all 1.0s ease-in-out;
	-ms-transition:all 1.0s ease-in-out;	
	transition:all 1.0s ease-in-out;
}
#slide1_images img {
	padding:0;
	margin:0;
	float:left;
}

Again, I’m using javascript to bind events to the clickable controls. This time I’m adding the number of pixels to slide into the js, though I could have defined classes for this.

$(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");
	});
});

This code could be abstracted and improved, but we are looking to keep it simple here.