bxSlider

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

1. Image slideshow with captions
2. Auto show with start / stop controls
3. Manual show without infinite loop
4. Slideshow using adaptiveHeight
5. Carousels demystified - in depth explanation with examples
6. Carousel - static number of slides showing
7. Carousel - dynamic number of slides showing
8. Thumbnail pager - method 1
9. Thumbnail pager - method 2
10. Vertical slideshow
11. Custom next / prev control selectors
12. Multiple slideshows
13. Callback API
14. Public methods
15. Responsive video
16. Ticker mode
17. Custom easing
18. Reload slider
19. Reload slider with new settings