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...
Lorem...
Lorem...
Lorem...
Lorem...
Lorem...
How to Use
1. CSS
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>
2. HTML
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>
3. Javascript
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>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.