Integrate banner slider on website using jquery

Hello friends today i am going to introduce a wonderful plugin called bxSlider, by which you can easily integrate a banner slider on your website with lot’s of customizable options, Slider banner always makes your website more attractive and meaningful, You can also add videos on your banner slides to connect your audience.



Integrating bxSlider is very easy, you don’t need to download lot’s of css and js library to add slider on your web page, I recommend this slider because of clean code and good documentation which gives you more privilege to make your slider more attractive.
banner-slider-jquery

Creating banner slider using bxSlider

Step-1: Create html page and add jquery library on page under head tag because bxSlider library dependent on jquery core library so you fist have to add jquery core library on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Step-2: After that add bxSlider css and js library on page.

<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script src="js/jquery.bxslider.js"></script>

Step-3: Add sample images on page for your banner under ul li tag, Don’t forget to add bxslider class on ul attribute .

<ul class="bxslider">
  <li><img src="images/banner-1.jpg" title="Banner-1" /></li>
  <li><img src="images/banner-2.jpg" title="Banner-2" /></li>
  <li><img src="images/banner-3.jpg" title="Banner-3" /></li>
</ul>

Step-4: Finally add javascript code snippet on page to apply slider action on your banner images.

<script>
$(function(){
  $('.bxslider').bxSlider();
});
</script>

If you want to apply some more action on your slider like auto play, auto slide, fade animation then you can pass these options in your bxSlider() function.

<script>
$(function(){
  $('.bxslider').bxSlider({
     mode: 'fade',
     captions: true,
     auto: true,
     autoControls: true
  });
});
</script>


See live demo and download source code.

DEMO

DOWNLOAD

You must see all bxSlider functions and options list on their github page https://github.com/stevenwanderski/bxslider-4 and apply on your banner slider to make it more customizable.

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Thanks 🙂