Here's a full-width demonstration of a popular open source image slider with many variables, bxslider, which uses javascript and jQuery in a very flexible method. Kudos to Steve Wanderski for giving us this excellent work.

To implement bxslider, you install a set of css rules (in the CSS injector), a corresponding set of javascript rules (in the Javascript injector), provided by bxslider. To initiate the effect, you install a script at the head of your image set on the page where the slider will display.

For this one, a few options can be set in the initiation script. More options are accessed in the bxslider.js script:

<script type="text/javascript">
(function ($) {
$(document).ready(function() {
    
$('#slider1').bxSlider({
  auto: true,
  autoControls: true,
  captions: true,
  pause: 9000,
});
});
})(jQuery);
 
</script>