Image Turn 360º In jQuery Slider – Turnable.js

Rotator
Image-Turn-360º-In-jQuery-Slider-Turnable.js
File Size: 259.78 KB
Views Total: 1703 views
Last Update:January 17, 2024
Publish Date: March 21, 2016
Official Website: Go to website
License: MIT
Plugin Author: PolarNotion
Demo    Download

A free jquery slider rotation responsive Image Turn 360º In 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 Image Turn 360º

Add jQuery library and the jQuery Turntable.js script :

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

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>

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; }

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

Thanks for make jQuery plugin is developed by PolarNotion For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.