Image Turn 360º In jQuery Slider – Turnable.js

Turntable.js-Responsive JQuery Slider
File Size:259.75 KB
Views Total:297
Last Update:January 10, 2018
Publish Date:January 10, 2018
Official Website:Go to website
License:MIT

A responsive jQuery slider that helps for the rotation through the images as per our mouse or with our finger that sweeps across the container is known as Turnable.js. While thinking of it just like the pattern of a flipbook along with the javascript and the jQuery. It’s basically the new alternative kind as to the typical click to slide system in the jQuery.

How to use :

1. Add jQuery library and the jQuery Turntable.js script :

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/turntable.js"></script>

2. Add your images to the slider/rotator using the data-img-src attribute on the lielement :

<div id="example" class="turntable">
  <ul>
    <li data-img-src="1.jpg"></li>
    <li data-img-src="2.jpg"></li>
    <li data-img-src="3.jpg"></li>
    <li data-img-src="4.jpg"></li>
    <li data-img-src="5.jpg"></li>
    <li data-img-src="6.jpg"></li>
    <li data-img-src="7.jpg"></li>
    <li data-img-src="8.jpg"></li>
    <li data-img-src="9.jpg"></li>
    <li data-img-src="10.jpg"></li>
    <li data-img-src="11.jpg"></li>
    <li data-img-src="12.jpg"></li>
    <li data-img-src="13.jpg"></li>
    <li data-img-src="14.jpg"></li>
  </ul>
</div>

3. The required CSS to style the image list :

.turntable { margin: 0px; }

.turntable ul {
  padding: 0px;
  margin: 0px;
}

.turntable ul li {
  list-style-type: none;
  display: none;
}

.turntable ul li img { width: 100%; }

.turntable ul li.active { display: block; }

4. By default plugin script will rotate through the images as your mouse moves along the x axis of the container. You can set the ‘axis’ to ‘y’ in the javascript like this :

$('#example').turntable({
  axis: 'x, y, or scroll',
  reverse: boolean, // true or false, will reverse the array of images
  scrollStart: 'top, middle, or bottom', // only necessary if axis = 'scroll'
});

Done