Part 5 - Examining the Slider HTML

Before we continue on with more advanced code, let's examine what goes on with our HTML after PlusSlider is initiated.



If you use your browser's developer tools to inspect the page (Web Inspector for Chrome/Safari, Firebug for Firefox, F12 Developer Tools for IE, or Dragonfly for Opera), you'll see the "generated source" for the slides after PlusSlider has taken effect:

<div class="plusslider plustype-fader" style="width: 630px; height: 250px;">
	<div id="slider1" class="plusslider-container">
		<img src="content/image1.jpg" alt="" height="250" width="630" class="child" style="display: none;">
		<img src="content/image2.jpg" alt="" height="250" width="630" class="child current" style="display: inline-block;">
		<img src="content/image3.jpg" alt="" height="250" width="630" class="child" style="display: none;">
	</div>
</div>

Notice that this differs from the original "source HTML" -- a new wrapper div has been added around the original #slider1 div, with some classes and inline styles.
A new class has been added to the original #slider1 div, and some inline styles have been added to the slides.
Don't worry about the new classes or inline styles, as they pertain to the slider functionality and are handled automatically by the PlusSlider code.

The only important thing to keep in mind is that your original div gets wrapped in another div by PlusSlider, which will impact the positioning of navigation arrows and pagination controls (as you'll see in the next part of the tutorial...)


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:


/* Essential slider functionality (never changes) */
	.plusslider { overflow: hidden; position: relative; }
	.plusslider-container { position: relative; }
	.plusslider .child { float: left; }
	.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; } /* only applies to fader type (not slider) */
	.plustype-fader .current { z-index: 5; } /* only applies to fader type (not slider) */
	.plusslider a img { border: none; } /* prevent blue borders in IE, which break "slider" type by altering the spacing */

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

Javascript Source (in html <head>):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.plusslider-min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('#slider1').plusSlider({
			createArrows: false,
			createPagination: false,
			sliderType: 'fader' //'slider' or 'fader'
		});
	});
</script>
		

← back to part 4 | continue to part 6 →