Responsive SEO friendly Carousel Plugin For jQuery Projector - Download Responsive & SEO-friendly Carousel Plugin For jQuery - Projector

Download Responsive & SEO-friendly Carousel Plugin For jQuery – Projector

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive & SEO-friendly Carousel Plugin For jQuery – Projector, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <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.

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

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

view source
01 <div class="slideshow">
02   <a href="#" class="previous" data-previous>Previous</a>
03   <a href="#" class="next" data-next>Next</a>
04   <ul class="pagers">
05     <li data-pager class="apos-current">1</li>
06     <li data-pager>2</li>
07     <li data-pager>3</li>
08   </ul>
09   <ul class="slideshow-items" data-slideshow-items>
10     <li data-slideshow-item class="slideshow-item apos-current">
11       <div class="slideshow-item-html">
12         <p>You can have as much markup as you like.</p>
13       </div>
14       <img src="1.jpg" data-image data-next>
15     </li>
16     <li data-slideshow-item class="slideshow-item apos-current">
17       <div class="slideshow-item-html">
18         <p>You can have as much markup as you like.</p>
19       </div>
20       <img src="2.jpg" data-image data-next>
21     </li>
22     <li data-slideshow-item class="slideshow-item apos-current">
23       <div class="slideshow-item-html">
24         <p>You can have as much markup as you like.</p>
25       </div>
26       <img src="3.jpg" data-image data-next>
27     </li>
28   </ul>
29 </div>

4. The sample CSS to style the slideshow.

view source
01 .slideshow-items {
02   position: relative;
03   display: block;
04   overflow: hidden
05 }
06  
07 .slideshow-item {
08   opacity: 0;
09   position: absolute;
10   top: 0;
11   left: 0;
12   list-style: none;
13   transition: opacity .3s ease-in-out, transform .3s ease-in-out;
14   -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
15   -moz-transition: opacity .3s ease-in-out, -moz-transform .3s ease-in-out;
16   -ms-transition: opacity .3s ease-in-out, -ms-transform .3s ease-in-out
17 }
18  
19 .slideshow-item.apos-current { opacity: 1 }
20  
21 .slideshow-item.apos-next { transform: translate3d(100%, 0, 0) }
22  
23 .slideshow-item.apos-previous { transform: translate3d(-100%, 0, 0) }
24  
25 .slideshow-item.apos-other { transform: translate3d(0, 0, 0) }
26  
27 .slideshow-item .slideshow-item-html {
28   position: absolute;
29   background: white;
30   top: 20px;
31   left: 20px;
32   padding: 30px
33 }
34  
35 .slideshow-item img {
36   max-width: 100%;
37   cursor: pointer
38 }
39  
40 .previous, .next {
41   position: relative;
42   width: 49%;
43   display: inline-block;
44   padding: 5px 1%;
45   color: #222;
46   text-align: center;
47   text-decoration: none;
48   background: #ccc
49 }
50  
51 .previous { margin-right: 2% }
52  
53 .pagers { source : jqueryscript.net

Related posts: