Custom easing

JS:

$('.bxslider').bxSlider({
  mode: 'horizontal',
  useCSS: false,
  infiniteLoop: false,
  hideControlOnEnd: true,
  easing: 'easeOutElastic',
  speed: 2000
});

HTML:

<!-- <script src="/js/plugins/jquery.easing.1.3.js"></script> must be included in the <head>
after the jQuery library, and before the jquery.bxslider.js file. See the source code
of this page for an example. -->

<ul class="bxslider">
  <li><img src="/images/730_200/hill_trees.jpg" /></li>
  <li><img src="/images/730_200/me_trees.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
  <li><img src="/images/730_200/trees.jpg" /></li>
  
</ul>

Note that in order to use the special easing functions provided by the jquery.easing plugin, 'useCSS' must be set to false (useCSS: false). The file jquery.easing.1.3.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:

<head>
  <!-- other stuff here -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="/js/plugins/jquery.easing.1.3.js"></script>
  <script src="/js/jquery.bxslider.js"></script>
</head>

Add sliders to any website
with just two lines of code
Check out sliderui.com!