Part 6 - Navigation Arrows and Pagination Controls (Unstyled)
In this example, we've told PlusSlider to output navigation arrows ("Previous" and "Next" links that users can click to advance the slider forwards or backwards by 1 slide) and pagination controls (numbers "1", "2", and "3" that users can click on to advance to a specific slide).
Note that PlusSlider outputs these controls by default, so we can simply remove the "createArrows: false" and "createPagination: false" options from the initialization javascript to make them appear.



Hmm... something doesn't look right here. We only see the navigation arrows ("Previous" and "Next"), but not the pagination controls. And the bottom of the slides are cut off. What's going on?
If you inspect the page (with your developer tools, not "view source"), you'll see that some more HTML elements have been added by PlusSlider:
<div class="plusslider plustype-fader" style="width: 630px; height: 250px;">
<div class="plusslider-arrows-wrapper">
<ul class="plusslider-arrows">
<li class="prev">Previous</li>
<li class="next">Next</li>
</ul>
</div>
<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 class="plusslider-pagination-wrapper">
<ul class="plusslider-pagination">
<li data-index="0" class="">1</li>
<li data-index="1" class="current">2</li>
<li data-index="2" class="">3</li>
</ul>
</div>
</div>
A "plusslider-arrows-wrapper" div was added above our #slider1 div, and a "plusslider-pagination-wrapper" div was added below our #slider1 div.
The "arrows" div is pushing down the #slider1 div, and because the ".plusslider" wrapper div that surrounds everything has the "overflow: hidden" style set in CSS,
the bottom of the slides get cut off.
The "overflow:hidden" style on the .plusslider wrapper is also why you can't see the pagination controls (because they are below the slides, and hence also get "cut off" by being outside the boundary of the .plusslider wrapper div).
There are several potential solutions to this problem:
Remove the "overflow: hidden" style from the ".plusslider" div in the CSS←this would break the slider functionalitySet an explicit width and height on the #slider1 div in the CSS←this has no effect because PlusSlider overwrites width/height based on slide sizes (so the slider works with slides of differing sizes)Add padding to the #slider1 div so there is "breathing room" around it for the controls←this causes previous and next slides to "peek through" when using the slide effect- Absolutely position the controls so they appear "in front of" or "floating above" the slider
- Put the arrows/pagination divs outside the ".plusslider" wrapper div (using the "arrowsPosition" and "paginationPosition" javascript options) and position them against a new outer wrapper div that has the "position:relative" style.
Option #5 is more complex (and requires you to add a non-semantic wrapper div), but works in all situations.
One final note before we move on: if all this talk about positioning elements has you confused, I highly recommend going through this quick tutorial on CSS positioning. You will be enlightened!
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({
sliderType: 'fader' //'slider' or 'fader'
});
});
</script>