Features

  • Horizontal, vertical, and fade transitions
  • Display and move multiple slides at once (carousel)
  • Prev / next, pager, auto controls
  • Easing transitions
  • Random start
  • Ticker mode
  • Before, after, first, last, next, prev callback functions
  • Optional styling included
  • Tons of options

Demo

  • The Velvet Underground & Nico
    The Velvet Underground
  • White Light / White Heat
    The Velvet Underground
  • The Velvet Underground
    The Velvet Underground
  • Loaded
    The Velvet Underground

Instructions

METHOD #1: EASY

Simply place the following code anywhere inside the <head> tag of your webpage:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>

NOTE: the element to which the slider is being applied must be structured in a similar fashion:

<ul id="slider1">
  <li>Slide one content</li>
  <li>Slide two content</li>
  <li>Slide three content</li>
  <li>And so on...</li>
</ul>

or

<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>

METHOD #2: ADVANCED

STEP ONE: Download jquery.bxslider.zip (from this link or the top of the page)

STEP TWO: Unzip and place the file jquery.bxSlider.min.js in the same location as the webpage that is displaying the slider.

STEP THREE: include the following code in the <head> section of your webpage:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>