Responsive & SEO-friendly Carousel Plugin For jQuery - Projector

File Size: 17.9 KB
Views Total: 1603
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive & SEO-friendly Carousel Plugin For jQuery - Projector

Projector is a simple, fast jQuery slideshow plugin that progressively enhances an HTML list into a fully responsive and SEO-friendly image carousel with the following features.

Features:

  • Custom navigation and pagination.
  • Adaptive height based on the tallest slide.
  • Auto adjusts the size of images to fit any screen.
  • Auto rotation and pause on hover.
  • Configurable transition delay between slides.
  • You can have as much markup as you like.

Basic usage:

1. Include the jQuery Projector plugin after loading jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.projector.js"></script>

2. Include the required jQuery imagesReady plugin to detect all the images have been loaded completely. imagesReady waits until the size of certain images is known, then tells you the maximum width, maximum height, and maximum ratio of height to width of all the images. This is super useful for implementing slideshows and anything else where you need to know the worst case before proceeding, or simply for any situation where you need to be sure of the image dimensions before proceeding.

<script src="jquery.images-ready.js"></script>

3. Add a list of html content together with the custom navigation and pagination to the webpage.

<div class="slideshow">
  <a href="#" class="previous" data-previous>Previous</a>
  <a href="#" class="next" data-next>Next</a>
  <ul class="pagers">
    <li data-pager class="apos-current">1</li>
    <li data-pager>2</li>
    <li data-pager>3</li>
  </ul>
  <ul class="slideshow-items" data-slideshow-items>
    <li data-slideshow-item class="slideshow-item apos-current">
      <div class="slideshow-item-html">
        <p>You can have as much markup as you like.</p>
      </div>
      <img src="1.jpg" data-image data-next> 
    </li>
    <li data-slideshow-item class="slideshow-item apos-current">
      <div class="slideshow-item-html">
        <p>You can have as much markup as you like.</p>
      </div>
      <img src="2.jpg" data-image data-next> 
    </li>
    <li data-slideshow-item class="slideshow-item apos-current">
      <div class="slideshow-item-html">
        <p>You can have as much markup as you like.</p>
      </div>
      <img src="3.jpg" data-image data-next> 
    </li>
  </ul>
</div>

4. The sample CSS to style the slideshow.

.slideshow-items {
  position: relative;
  display: block;
  overflow: hidden
}

.slideshow-item {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out, -moz-transform .3s ease-in-out;
  -ms-transition: opacity .3s ease-in-out, -ms-transform .3s ease-in-out
}

.slideshow-item.apos-current { opacity: 1 }

.slideshow-item.apos-next { transform: translate3d(100%, 0, 0) }

.slideshow-item.apos-previous { transform: translate3d(-100%, 0, 0) }

.slideshow-item.apos-other { transform: translate3d(0, 0, 0) }

.slideshow-item .slideshow-item-html {
  position: absolute;
  background: white;
  top: 20px;
  left: 20px;
  padding: 30px
}

.slideshow-item img {
  max-width: 100%;
  cursor: pointer
}

.previous, .next {
  position: relative;
  width: 49%;
  display: inline-block;
  padding: 5px 1%;
  color: #222;
  text-align: center;
  text-decoration: none;
  background: #ccc
}

.previous { margin-right: 2% }

.pagers { padding: 0 }

.pagers li {
  list-style: none;
  position: relative;
  width: 32%;
  margin-right: 2%;
  display: inline-block;
  padding: 5px 1%;
  cursor: pointer;
  color: #222;
  text-align: center;
  background: #ccc
}

.pagers li:last-child { margin-right: 0 }

.pagers li.apos-current { background: #bbb }

5. Initialize the slideshow and done.

$('.slideshow').projector();

6. Configuration options available.

$('.slideshow').projector({

  // the delay between each slideshow item specified in milliseconds.
  // set this to 0 to turn off automatic slideshow advancing.
  delay: 2000,

  // the classname applied to the current slideshow item
  currentClass: 'apos-current',

  // the classname applied to the item before the current item
  previousClass: 'apos-previous',

  // the classname applied to the item after the current item
  nextClass: 'apos-next',

  // the classname applied to the other item when the
  // slideshow is of length 2
  otherClass: 'apos-other',

  // kills setTimeout interval when user clicks next/previous. Defaults to 'false'
  pauseOnClick: true,

  // turns off automatic height when set to 'true' (see the Automatic Height section below).
  // defaults to 'false'.
  noHeight: false,

  // turns on a responsive height listener when set to 'true'. Defaults to 'false'
  responsiveHeight: true,
  
  // turns off the next and previous classes, leaving only 'apos-current'.
  // defaults to 'false'.
  noNextAndPreviousClasses: false,

  resizeTimeout: 100

});

Change log:

2016-10-11

  • Update to add global default options

2016-09-02

  • bugfix

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