Image Turn 360º In jQuery Slider – Turnable.js

Rotator
File Size: 259.78 KB
Views Total: 1133 views
Last Update:November 01, 2022
Publish Date: March 21, 2016
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A 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.

Table of Contents

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

Thanks for make jQuery plugin is developed by 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.

Related jQuery Plugins

You Might Also Like