Part 3 - Unstyled Slider

Now we have added the essential PlusSlider CSS to the stylesheet, included JQuery and PlusSlider script files, and activated the PlusSlider with some javascript code.

Note that we've set a few options on the PlusSlider via the JS initialization code in the <head> of the document -- we've specified the 'slider' type (as opposed to 'fader'), and we've told PlusSlider to *not* output arrows or pagination controls (because they will make things more complicated at first -- but don't worry, we'll add them back in soon).



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: 'slider' //'slider' or 'fader'
	});
});
</script>
		

← back to part 2 | continue to part 4 →