BX-Slider

by vincentieo

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- <script src="http://bxslider.com/lib/jquery.bxslider.js"></script> -->

<ul class="bxslider">
  <li><img src="http://placehold.it/300x180px&text=image" /></li>
  <li><img src="http://placehold.it/300x180px&text=image" /></li>
  <li><img src="http://placehold.it/300x180px&text=image" /></li>
  <li><img src="http://placehold.it/300x180px&text=image" /></li>
</ul>

<div class="slider1">
    <div class="slide"><a href=""><img src="http://placehold.it/350x150&text=FooBar1"></a></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>

JavaScript

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

$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 3,
    maxSlides: 6,
    slideMargin: 10,
        infiniteLoop: true,
      ticker: true,
      tickerHover: true,
      pager: false,
      controls: false,
      speed: 50000,
      responsive: true
  });
});