bxslider

The fully-loaded, responsive jQuery content slider.

Step 1: Link required filesFirst 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="/assets/js/bxslider/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="/assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />Step 2: Create HTML markupCreate 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="/assets/images/pic1.jpg" /></li>  <li><img src="/assets/images/pic2.jpg" /></li>  <li><img src="/assets/images/pic3.jpg" /></li>  <li><img src="/assets/images/pic4.jpg" /></li></ul>Step 3: Call the bxSliderCall .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();});