Part 8 - Navigation Arrows and Pagination Controls (Positioned Outside)
And here is a slider skeleton with the nav arrows and pagination controls outside the slider div.



As discussed in part 6 of the tutorial, we've changed the 'arrowsPosition' and 'paginationPosition' options in the javascript,
and we've added an outer wrapper div (with "position: relative") to the HTML.
There is also a red border around the inner wrapper, and an orange border around the outer wrapper.
These borders show how the nav arrows and pagination controls are positioned against the new outer wrapper div.
HTML Source:
<div id="slider1-wrapper">
<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>
</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 and pagination controls */
margin: 0 75px 40px 75px;
}
.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 {
/* make these look like basic buttons */
width: 55px;
padding: 5px;
text-align: center;
border: 1px solid black;
cursor: pointer;
}
.plusslider-pagination li {
/* line these up in a row and make them clearly visible over the slides */
float: left;
margin-left: 5px;
padding: 5px;
border: 1px solid black;
cursor: pointer;
}
/* Put borders around the wrapper divs (for demonstration purposes only) */
#slider1-wrapper {
border: 1px dashed orange; /* just for demo purposes */
}
.plusslider {
border: 1px dashed red; /* just for demo purposes */
}
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>