Creating a JavaScript slideshow: the HTML structure

A JavaScript slideshow (or slider) is made up of three main components: an HTML structure, a CSS presentation and a JavaScript behavior. These components work together to make the slideshow work in the way it should, that is, to allow users to navigate through a series of items. In this article we'll cover in depth the first component, the HTML structure.

The HTML structure

It's important to keep in mind that our HTML markup must make sense without CSS and JavaScript enabled. In other words people should still be able to access our content even when they use a browser that doesn't support CSS and JavaScript (such as Lynx) or when CSS and JavaScript are disabled.

To accomplish this task, we need to know which components will be part of our structure. Typically, these components are:

1. An outermost container element.
2. An optional innermost wrapper element.
3. Several elements that represent slides.
4. An optional wrapper for pagination links.
5. Two optional buttons for the "Previous" and "Next" actions.

The 2, 4 and 5 components are optional for the following reasons:

• Slides can be wrapped only by a single element. This happens often when the presentation effect hinges on a fade in/fade out transition.
• Pagination links and buttons can be omitted when the slideshow is automatic, meaning that the main animation take place without an interaction with the final user.

Here is an example of a possible HTML structure.

<div class="slider" id="main-slider"><!-- outermost container element -->
	<div class="slider-wrapper"><!-- innermost wrapper element -->
		<div class="slide">...</div><!-- slides -->
		<div class="slide">...</div>
		<div class="slide">...</div>
	</div>
	<div class="slider-nav"><!-- "Previous" and "Next" actions -->
		<button class="slider-previous">Previous</button>
		<button class="slider-next">Next</button>
	</div>
</div>

It's always a good thing to use classes on slideshow's elements because there might be several slideshows on the same page. To uniquely identify a slideshow you can set an ID on the outermost container element.

We use two button elements in the above markup because in this case using HTML links won't be appropriate: links won't point to existing locations so the best thing to do is using two scriptable elements.

If your slides contain only images, you can slightly modify our initial 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>

Don't forget to always add a meaningful value to the alt attribute of each image. This simple practice will allow screen readers to read aloud your descriptions instead of simply getting no content at all.

To use pagination links, you can change the initial markup as follows:

<div class="slider" id="main-slider"><!-- outermost container element -->
	<div class="slider-wrapper"><!-- innermost wrapper element -->
		<div class="slide" id="slide-1">...</div><!-- slides -->
		<div class="slide" id="slide-2">...</div>
		<div class="slide" id="slide-3">...</div>
	</div>
	<div class="slider-nav"><!-- pagination links -->
		<a href="#slide-1">1</a>
		<a href="#slide-2">2</a>
		<a href="#slide-3">3</a>
	</div>
</div>

Now each pagination link points to a different slide thanks to the anchor set on its href attribute. This is intentional: we want each link to work without JavaScript. In case you're wondering how you can create IDs and anchors, heres how you can do this in PHP (WordPress):

<div class="slider" id="main-slider">
<?php
$slides = new WP_Query( array( 'post_type' => 'slides', 'posts_per_page' => -1 ) );

if( $slides->have_posts() ) {
?>

	<div class="slider-wrapper">
<?php

	$total_slides = $slides->post_count;
	$count = 0;
	
	while( $slides->have_posts() ) {
		$count++;
		$slides->the_post();
	?>
		<div class="slide" id="slide-<?php echo $count;?>">...</div>
		
	<?php	
	}
	wp_reset_query();
	?>
	</div>
	
	<div class="slider-nav">
		<?php
			for( $i = 0; $i < $total_slides; $i++ ) {
				$n = $i + 1;
		?>
			<a href="#slide-<?php echo $i;?>"><?php echo $n; ?></a>
		<?php		
			}
		?>
	</div>
<?php
}
?>
</div>

If you're not using WordPress, don't worry: the loops showed above can be easily reproduced in many other environments.

Conclusion

Building a solid HTML structure is the first step for creating JavaScript slideshows that will degrade gracefully when JavaScript and CSS are not available.