Creating a JavaScript slideshow: the CSS layout

In our previous article we've covered the most common HTML structures used to create a JavaScript slideshow. Now its time to discuss the second component of a JavaScript slideshow, namely the CSS layout.

Let's start with the following HTML structure:

<div class="slider" id="main-slider"><!-- outermost container element -->
	<div class="slider-wrapper"><!-- innermost wrapper element -->
		<img src="image1.jpg" alt="First" class="slide" /><!-- slides -->
		<img src="image2.jpg" alt="Second" class="slide" />
		<img src="image3.jpg" alt="Third" class="slide" />
	</div>
	<div class="slider-nav"><!-- "Previous" and "Next" actions -->
		<button class="slider-previous">Previous</button>
		<button class="slider-next">Next</button>
	</div>
</div>

What we want to achieve is shown in the following picture:

The big arrow indicates that our slideshow will slide from right to left. This means that the outermost element will have a stated dimension while the innermost wrapper element will be wider in order to contain all the slides.

As you can see, only the first slide is initially visible. We can do this thanks to the CSS overflow property:

.slider {
	width: 1024px;
	overflow: hidden;
}

.slider-wrapper {
	width: 9999px;
	height: 683px;
	position: relative;
	transition: left 500ms linear;
}

The innermost wrapper element has the following important styles:

• A larger width to contain all the slides.
• A stated height to correctly set a maximum height for the slides and to apply clearance to the floated slides.
• A relative positioning that will create the sliding movement from right to left.
• A CSS transition on the left property that will allow a fluid sliding movement.

As said earlier, all the slides are floated in order to allow them to be aligned on the same line. Further, they're also relatively positioned because we want to get their left offset with JavaScript. This offset will be used to make the innermost wrapper element slide and reveal the current image.

.slide {
	float: left;
	position: relative;
	width: 1024px;
	height: 683px;
}

In our markup the navigation system is made up of a "Previous" and "Next" buttons. When styling button elements we have to first reset their default styles and then apply our rules:

.slider-nav {
	height: 40px;
	width: 100%;
	margin-top: 1.5em;
}

.slider-nav button {
	border: none;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-indent: -9999em;
	background-color: transparent;
	background-repeat: no-repeat;
}

.slider-nav button.slider-previous {
	float: left;
	background-image: url(previous.png);
}

.slider-nav button.slider-next {
	float: right;
	background-image: url(next.png);
}

If you use pagination links instead of buttons, you can change the above styles as follows:

.slider-nav {
	text-align: center;
	margin-top: 1.5em;
}

.slider-nav a {
	display: inline-block;
	text-decoration: none;
	border: 1px solid #ddd;
	color: #444;
	width: 2em;
	height: 2em;
	line-height: 2;
	text-align: center;	
}
.slider-nav a.current {
	border-color: #000;
	color: #000;
	font-weight: bold;
}

The current class will be dynamically applied by JavaScript when a slide is selected.

Conclusion

Creating a good CSS layout is the second step for creating JavaScript slideshows and is crucial for a proper JavaScript interaction.