Part 4 - Unstyled Fader
This is pretty much the same as the last example, but we've switched the transition effect from 'slider' to 'fader' in the javascript initialization code.



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