Part 2 - Non-JS Fallback

Before we implement the slider functionality, let's make sure things will look okay for people without javascript enabled.
The easiest thing to do (in terms of not breaking the rest of our page layout) is to show the first slide and hide all the rest (in our CSS).

Note that this technique doesn't work in IE6 because of the ">" and the ":first-child". If you need to support non-javascript fallback in IE6,
you'll have to add one class to the first slide and another class to the remaining slides -- then set the first class to "display:block" and the
other class to "display:none" in the CSS.



HTML Source:


<div id="slider1">
	<img src="content/image1.jpg" alt="" height="250" width="630" />
	<img src="content/image2.jpg" alt="" height="250" width="630" />
	<img src="content/image3.jpg" alt="" height="250" width="630" />
</div>
		

CSS Source:


/* No-javascript fallback (change "#slider1" selectors below to suit your html) */
	#slider1 > * { display: none; }
	#slider1 > *:first-child { display: block; }
		

Javascript Source (in html <head>):


none
		

← back to part 1 | continue to part 3 →