Responsive 3D Rotating Carousel Plugin For jQuery - carousel-3d

File Size: 297 KB
Views Total: 19445
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive 3D Rotating Carousel Plugin For jQuery - carousel-3d

Carousel-3d is a jQuery plugin helps you create a responsive, cross-browser, 3D rotating carousel for presenting your images in an awesome manner.

Dependencies:

  • jQuery
  • jQuery Resize Plugin
  • modernizr.js

See also:

How to use it:

1. Include jQuery library and other required resources in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-resize/1.1/jquery.ba-resize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

2. Include the carousel-3d.js script after jQuery library.

<script src="carousel-3d.js" ></script>

3. Insert your images with next/prev navigation into your webpage as follows.

<div data-carousel-3d>
  <img src="images/left.png" data-carousel-3d-prev>
  <img src="images/right.png" data-carousel-3d-next>

  <ul data-carousel-3d-children>
    <li><img src="1.jpg"></li>
    <li selected><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
    <li><img src="6.jpg"></li>
  </ul>

</div>

Change logs:

v0.2.2 (2015-05-06)

v0.2.1 (2015-03-20)

  • bug fix : Multiple instances

v0.2.0 (2015-03-13)

  • re-engineer project

v0.1.0 (2015-02-21)

  • improved transforms
  • added theme feature

v0.0.6 (2015-02-19)

  • improved IE8,9 transform.
  • fix bug: wrong height scale.
  • data-carousel-3d-left / data-carousel-3d-right notation has changed to data-carousel-3d-prev / data-carousel-3d-next.

v0.0.5 (2015-02-18)

  • added 'select' event
  • bug fix: not initialized on safari 8

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