Responsive Slider With Thumbnail Carousel – camRoll Slider

Live Demo

Lorem...

Lorem...

Lorem...

Lorem...

Lorem...

Lorem...

<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>
<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>
<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>

Source Code

Download

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