Part 11 - Differently-Sized Slides

In previous examples, we've been working with slides that are all the same size.
But PlusSlider works just fine with slides of different sizes too!
You still need to set an explicit width/height on each slide,
but this width/height can be different and the PlusSlider will grow and shrink to accommodate.


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


Note that in this example, we've removed the overall width/height setting
(by deleting the ".plusslider .child" selector from the CSS),
and instead set a specific width/height on each non-image slide
(via their own CSS selectors). As always, image slide widths/heights
are set directly in the <img> tag attributes.


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="125" width="315" /></a>
		
		<img src="content/image2.jpg" alt="" height="250" width="500" />

		<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 contents (non-image slides) */
	.slide1 {
		background: url(content/image4.jpg) no-repeat left top;
		padding: 20px 0 0 40px;
		width: 590px;
		height: 210px;
	}
	.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;
		width: 400px;
		height: 300px;
	}

	.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 10 | continue to part 12 →