Responsive jQuery Based Carousel with Thumbnail Navigation - PaW Carousel

File Size: 3 MB
Views Total: 4194
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive jQuery Based Carousel with Thumbnail Navigation - PaW Carousel

PaW Carousel (v2) is a lightweight jQuery plugin for creating a responsive, full width, infinite carousel/slideshow with thumbnail navigation.

More features:

  • Retina images supported.
  • Arrows/thumbnails navigation.
  • Full width and auto center the active slide.
  • Auto resize to fit any screen size.
  • Supports any Html elements not only images.
  • Custom slide animations.
  • Fade-in effects when images loaded.

Basic Usage:

1. Load the jQuery library and the jQuery PaW Carousel plugin's files in the document.

<link rel="stylesheet" href="css/pawcarousel.css">

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/pawcarousel.jquery.min.js"></script>

2. Add your content to the carousel/slideshow following the Html structure like this;

<section class="paw-carousel-wrap">
  <div class="paw-carousel">
    <div class="paw-carousel-items-wrap">
      <div class="paw-carousel-item"> <img src="images/ajax-loader.gif" data-src="1.jpg" data-src-2x="[email protected]" width="494" height="370" class="paw-carousel-item-media">
        <h3>This is some description text</h3>
      </div>
      <div class="paw-carousel-item">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/aYxni8ohTfU" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="paw-carousel-item"> <img src="images/ajax-loader.gif" data-src="2.jpg" data-src-2x="[email protected]" width="494" height="370" class="paw-carousel-item-media">
        <h3>This is some description text</h3>
      </div>
      <div class="paw-carousel-item"> <img src="images/ajax-loader.gif" data-src="3.jpg" data-src-2x="3.jpg@2x" width="446" height="370" class="paw-carousel-item-media">
        <h3>This is some description text</h3>
      </div>
      <div class="paw-carousel-item"> <img src="images/ajax-loader.gif" data-src="4.jpg" data-src-2x="4.jpg@2x" width="612" height="370" class="paw-carousel-item-media">
        <h3>This is some description text</h3>
      </div>
      <div class="paw-carousel-item"> <img src="images/ajax-loader.gif" data-src="5.jpg" data-src-2x="5.jpg@2x" width="791" height="370" class="paw-carousel-item-media">
        <h3>This is some description text</h3>
      </div>
    </div>
    
    <!--Next and previous links. SVGs - change with PNGs if you want browser support --> 
    <a href="#" class="paw-carousel-prev">
      <img src="images/arr-prev.svg" alt="Previous">
    </a> 
    <a href="#" class="paw-carousel-next">
      <img src="images/arr-next.svg" alt="Next">
    </a> 
    
    <!--Left and right translucent masks-->
    <div class="paw-carousel-mask-l"></div>
    <div class="paw-carousel-mask-r"></div>
  </div>
  
  <!--Thumbnail navigation-->
  <nav class="paw-carousel-thumbs">
    <ul>
      <li class="paw-carousel-nav-item"><img src="1.jpg"></li>
      <li class="paw-carousel-nav-item"><img src="7.jpg"><span class="paw-carousel-icn-thumb-vid"></span></li>
      <li class="paw-carousel-nav-item"><img src="2.jpg"></li>
      <li class="paw-carousel-nav-item"><img src="3.jpg"></li>
      <li class="paw-carousel-nav-item"><img src="4.jpg"></li>
      <li class="paw-carousel-nav-item"><img src="5.jpg"></li>
      <li class="paw-carousel-nav-item"><img src="6.jpg"></li>
    </ul>
  </nav>
</section>

3. Call the plugin on the parent container and done.

$(function(){
  $('.paw-carousel').pawCarousel();
});

4. Available options and defaults.

// The class that wraps each carousel item.
carouselItemCls:'paw-carousel-item',

// The class that wraps each carousel item's media
carouselItemMediaCls:'paw-carousel-item-media',

// The class of the DIV that contains the carousel items only.
carouselItemsWrapCls: 'paw-carousel-items-wrap',

// The class that wrap each nav/thumbnail item.
carouselNavItemCls: 'paw-carousel-nav-item',

// The class of the next link
nextLinkCls:'paw-carousel-next',

// The class of the prev link
prevLinkCls:'paw-carousel-prev',

// The class of the active item in the carousel and the thumbnails.
activeCls: 'active',

// The class when an image becomes cropped
croppedCls: 'cropped',

// This is the margin-right of each carousel item. 
// If 'css' it will calculate from your CSS.
// If set as an integer then will write this margin-right value to each item.
carouselItemSpace: 'css',

// Animation speed of next/prev + thumbnail nav.
animSpeed:800,

// Aligned the active item to the left, right or center of the carousel
alignment:'center', 

// How many sets get cloned to each side of the original. 
// This give it the 'infinite' look.
setsEachSide: 1,

// 'shortest' crops slideshow height to the shortest item (excluding videos); 
// 'tallest' sets the slideshow to the tallest item (excluding videos); 
// An integer/number will set the slideshow to this height (in px);
carouselHtType: 'shortest'

Change logs:

2014-11-04

  • Have to calculate item height on load and on resize as Chrome/Webkit does not load images first.

2014-11-03

  • Choose whether to resize or crop images at smaller screen sizes; 
  • Better reveal/initial load with image load check; 
  • Chrome initial image size calculation fix;

2014-11-01

  • Fix for preventing video reset when playing on mobile devices (triggered by screen resize)

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