Part 10 - HTML Content

One of the great things about PlusSlider is that you're not limited to just images for the slides
-- you can have any kind of HTML element be a slide (for example, a <div> with more HTML inside).


PlusSlider

A content slider that simply works...
The right way

The difference between the right word
and the almost right word is the difference
between lightning and a lightning bug.
- Mark Twain


An important thing to keep in mind when dealing with non-image slides
is that you must explicitly set a width and height on each slide in CSS.
The easiest way to do this is to put a width and height on the ".plusslider .child" selector.

Note that you also need to set an explicit width/height on image slides,
but this must be done via the "width" and "height" attributes of the <img> tag itself.

If you want to add margin or padding to a particular slide, you'll need to either
reduce the width/height on that slide (thus overriding the general width/height on
the ".plusslider .child"), or add another wrapper element inside the slide contents
and put the margin/padding on that inner element.
Examples of both techniques can be seen in this part's CSS.


HTML Source:


<div id="slider1-wrapper">
	<div id="slider1">

		<div id="winning-slide" class="slide1">
			<h2>PlusSlider</h2>
			<p>
				A content slider that simply works...<br />
				The right way
			</p>
		</div>

		<a href="#"><img src="content/image1.jpg" alt="" height="250" width="630" /></a>
		
		<img src="content/image2.jpg" alt="" height="250" width="630" />

		<div class="quotation">
			<p>
			The difference between the right word<br />
			and the almost right word is the difference<br />
			between lightning and a lightning bug.<br />
			- Mark Twain
			</p>
		</div>
		
		<img src="content/image3.jpg" alt="" height="250" width="630" />

	</div>
</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; }


/* Position the nav arrows & pagination controls */
	#slider1-wrapper {
		position: relative; /* so child elements (nav arrows and pagination controls) can be positioned absolutely against this */
		
		display: inline-block; /* make wrapper div the size of its contents */
		zoom: 1; *display: inline; /* make inline-block work in IE6/7 */
	}
	
	.plusslider {
		/* create space for nav arrows */
		margin: 0 24px 34px 24px;
	}
	
	.plusslider-arrows .prev {
		/* place "prev" arrow to the left of the slider */
		position: absolute;
		top: 40%;
		left: 0;
	}
	
	.plusslider-arrows .next {
		/* place "next" arrow to the right of the slider */
		position: absolute;
		top: 40%;
		right: 0;
	}
	
	.plusslider-pagination-wrapper {
		/* place pagination controls below the slider */
		position: absolute;
		bottom: 0;
		left: 50%; /* center horizontally (works with child's "position:relative; left:-50%;") */
	}
	
	.plusslider-pagination {
		/* center horizontally (works with parent's "position:absolute; left:50%;" -- see http://stackoverflow.com/a/1777282/477513 ) */
		position: relative;
		left: -50%;
	}

/* Style the nav arrows & pagination controls */
	.plusslider-arrows,
	.plusslider-pagination {
		/* reset default list styles */
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.plusslider-arrows li {
		text-indent: -9999px; /* hide the text */
		cursor: pointer;
	}
	
	.plusslider-arrows .prev {
		background: url(images/arrow-prev.png) no-repeat 0 0;
		width: 24px;
		height: 43px;
	}
	
	.plusslider-arrows .next {
		background: url(images/arrow-next.png) no-repeat 0 0;
		width: 24px;
		height: 43px;
	}
	
	.plusslider-pagination li {
		/* line these up in a row */
		float: left;
		margin-left: 5px;
		
		
		/* make them look like little buttons */
		text-indent: -9999px;
		background: url(images/pagination.png) no-repeat 0 0;
		width: 24px;
		height: 24px;
		cursor: pointer;
		
		
	}
	.plusslider-pagination li.current {
		background-position: 0 -26px;
	}


/* Slide width/height (required for non-image slides) */
	.plusslider .child {
		width: 630px;
		height: 250px;
	}

/* Slide contents (non-image slides) */
	.slide1 {
		background: url(content/image4.jpg) no-repeat left top;
		padding: 20px 0 0 40px;
		width: 590px !important; /* override slide width to compensate for padding */
		height: 230px !important; /* override slide height to compensate for padding */
	}
	.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
	.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
	
	.quotation {
		background: #333;
		font: 24px Georgia, serif;
		color: #f1f1f1;
		text-align: center;
	}

	.quotation p {
		padding: 50px; /* Unlike the .slide1 example, we do *not* need to override slide width/height (because this padding is on an inner element, not the slide itself) */
	}
		

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({
			arrowsPosition: 'before',
			paginationPosition: 'after',
			sliderType: 'slider' //'slider' or 'fader'
		});
	});
</script>
		

← back to part 9 | continue to part 11 →