CamRoll is a javascript library that allows the user enables to navigate between slides by clicking/taping the navigation thumbnails. You can add description information for images in slides

Features:

Thumbnails support
Fully Responsive
Diplay description information for images
Create image slideshow with thumbnails
Auto play and infinite loop to create a content carousel

Live Demo

Lorem...

How to Use

Add the css below to your html page

<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/css/camroll_slider.css" />
<style>
    .container {
        max-width: 760px;
        width: 100%;
        margin: 0px auto !important;
        padding: 0 20px;
        padding-bottom: 20px !important;
    }

    #my-slider {
        width: 100%;
        height: 404px;
        color: white;
    }

    @media (max-width: 640px) {

        #my-slider .crs-bar-roll-current {
            width: 38px;
            height: 38px;
        }

        #my-slider .crs-bar-roll-item {
            width: 30px;
            height: 30px;
        }
    }
</style>

Create a container where you want to render slider

<div class="container">
    <div id="my-slider" class="crs-wrap">
        <div class="crs-screen">
            <div class="crs-screen-roll">
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/680.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/676.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/660.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/646.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/633.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
                <div class="crs-screen-item"
                    style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/28.jpg')">
                    <div class="crs-screen-item-content">
                        <h1>Lorem...</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="crs-bar">
            <div class="crs-bar-roll-current"></div>
            <div class="crs-bar-roll-wrap">
                <div class="crs-bar-roll">
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/680.jpg')">
                    </div>
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/676.jpg')">
                    </div>
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/660.jpg')">
                    </div>
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/646.jpg')">
                    </div>
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/633.jpg')">
                    </div>
                    <div class="crs-bar-roll-item"
                        style="background-image: url('http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/images/628.jpg')">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Load jQuery library together with the Responsive Slider With Thumbnail Carousel library into your code

<script
    src="http://onlinefreetools.net/wp-content/uploads/demo/slider/responsive-thumbnail-carousel-camroll-slider/js/camroll_slider.js">
</script>
<script>
    $(function () {
        $("#my-slider").camRollSlider();
    });
</script>