jQuery Content Slider – bxSlider

bxslider is a javascript library that allows creating slide show in website. bxslider allows you to convert slides with many different effects. You can also click the arrow on pre and next to move slides. You can also view any slide with buttons below the slide show.

Features:

  • Many slide transition effects
  • Browse slides with next and pre button
  • Open any slide with buttons
  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)
  • Diplay description information for images
  • Auto show with start / stop controls

Live Demo

Image gallery with captions

Auto show with start / stop controls

How to Use

Add the css below to your html page

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/css/jquery.bxslider.css" />

Create a container where you want to render slider

<h4>Image gallery with captions</h4>
<div class="bxslider">
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide1.jpg"
            title="Funky roots"></div>
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide2.jpg"
            title="The long and winding road"></div>
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide3.jpg"
            title="Happy trees"></div>
</div>

<h4>Auto show with start / stop controls</h4>
<div class="bxslider2">
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide1.jpg"
            title="Funky roots"></div>
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide2.jpg"
            title="The long and winding road"></div>
    <div><img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/images/slide3.jpg"
            title="Happy trees"></div>
</div>

Load jQuery library together with the jQuery Content Slider library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/slider/bxslider/js/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function () {

        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            slideWidth: 600
        });

        $('.bxslider2').bxSlider({
            auto: true,
            autoControls: true,
            stopAutoOnClick: true,
            pager: true,
            slideWidth: 600
        });

    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.