jQuery Content Slider – bxSlider

Live Demo

Image gallery with captions

Auto show with start / stop controls

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