Responsive jQuery content slider

Responsive jQuery content slider, Check the below features

  • Fully responsive
  • Horizontal, vertical, and fade modes
  • Slides can contain images, video, or HTML content
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+

Please use the following methods to use the plugin. First thing you have to do is download the whole files. and place the css code in css files. Call the jquery files from google or from any other good cdn

Step 1 : Include Libraries


<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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" />

Or, if you like, you can get the bxSlider’s resources from the CDN: check below

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

Step 2: HTML markup

Insert the markup in the slider div

<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: Calling the bxSlider

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

Read More Download