Responsive & Touch-enabled jQuery Carousel Plugin - humbleSlider

humbleSlider is a responsive, customizable, touch-friendly jQuery image carousel slider plugin that features keyboard/swipe/arrows navigation, infinite loop, CSS3 transition support and much more. The plugin makes use of jQuery HiSRC plugin for adaptive images in responsive web design and jQuery touchSwipe plugin for support of swipe gestures on touch devices.

How to use it:

1. Include necessary javascript libraries at the bottom of the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="vendor/jquery.touchSwipe.min.js"></script> 
<script src="vendor/modernizr.min.js"></script> 
<script src="vendor/hiSrc.js"></script> 
<script src="js/jquery.humbleSlider.js"></script> 

2. Wrap the images in a wrapper.

<div id="slider" class="slider">
<div class="container">
<div class="slider-image"> <img src="img/img1.jpg" data-1x="img/[email protected]" data-2x="img/[email protected]"> </div>
<div class="slider-image"> <img src="img/img2.jpg" data-1x="img/[email protected]" data-2x="img/[email protected]"> </div>
<div class="slider-image"> <img src="img/img1.jpg" data-1x="img/[email protected]" data-2x="img/[email protected]"> </div>
</div>
</div>

3. The sample CSS to style the image carousel.

.slider {
overflow: hidden;
position: relative;
width: 768px;
max-width: 100%;
margin: 3em auto
}
.slider .container {
position: relative;
left: 0
}
.slider-image img {
width: 100%;
line-height: 0;
background-size: cover;
display: block
}
a.slider-controls {
opacity: 0;
transition: opacity 0.4s ease, background-color 0.2s ease;
pointer-events: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 15%;
background-color: rgba(255,255,255,0.2);
vertical-align: middle;
color: white;
right: 0;
transition: background-color 0.2s ease
}
.no-touch .slider:hover a.slider-controls, a.slider-controls .no-touch .slider:focus, a.slider-controls .no-touch .slider:active {
opacity: 1
}
a.slider-controls:hover, a.slider-controls:focus, a.slider-controls:active {
background-color: rgba(255,255,255,0.4)
}
a.slider-controls .next {
display: block;
text-indent: -999rem;
position: absolute;
width: 50%;
height: 15%;
left: 50%;
top: 50%;
margin: -25% 0 0 -25%;
background-size: 100%
}
a.slider-controls .counter {
position: absolute;
bottom: 1em;
font-size: 1.2rem;
width: 100%;
text-align: center
}
a.slider-controls.hide {
opacity: 0 !important;
pointer-events: none
}

4. Initialize the image carousel with options.

<script>
$(document).ready(function() {
$('#slider').humbleSlider({

speed:  0.5, // Duration in seconds for sliding one image. Sliding 3 images means (3 * speed) = 1.5 sec default

swipe: { // configures touch gesture support
enabled: true,
    trigger: '.touch'
},

key: { // configures key navigation support. Previous / next values represent the key number, default is left and right arrow key.
    enabled: true,
    previous: 37,
    next: 39
},

navigation: true, // you really shouldn't disable it!

nextImage: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iDQoJNTUuMzU0LDUuOTQ2IDE0NC42NDYsOTkuNjE0IDU1LjM1NCwxOTQuMDUzICIvPg0KPC9zdmc+DQo=', // Path to image that will be shown in the navigation bar

height: '50%' // aspect ratio of the images, 50% equals 2:1 ratio});
});
</script>

Change log:

2014-03-03

• fixed bugs

---

This awesome jQuery plugin is developed by alexJunger. For more Advanced Usages, please check the demo page or visit the official website.