Minimal Touch-enabled 3D Rotator with jQuery and CSS3 - swipeToRotate

swipeToRotate is a very small jQuery plugin that uses CSS3 transitions and transforms to create a 3D cube image rotator with touch swipe and mouse drag support.

How to use it:

1. Add references to the latest version of jQuery library and the jQuery swipeToRotate plugin's JS & CSS to your webpage.

<link rel="stylesheet" href="src/jquery.swipeToRotate.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="src/jquery.swipeToRotate.js"></script>

2. Add the images to the rotator as follow.

<div class="touchWrapper">
  <div class="box">
    <div class="_4">
      <img src="4.jpg" alt="">
    </div>
    <div class="_3">
      <img src="3.jpg" alt="">
    </div>
    <div class="_2">
      <img src="2.jpg" alt="">
    </div>
    <div class="_1">
      <img src="1.jpg" alt="">
    </div>
  </div>
</div>

3. Call the function on the parent container and we're done.

$('.touchWrapper').swipeToRotate();

4. Default thresholds & swipe functions

$('.touchWrapper').swipeToRotate({
  threshold: {
    x: 70
  },
  speed: 100,
  swipeLeft: $.noop(),
  swipeRight: $.noop()
});

---

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