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