Our goal with Turntable.js is to shake-up the standard approach to web sliders, JQuery sliders, and image viewers. The average JQuery slider is clunky and relys on the 'click' behavior. Knowing how precious user clicks are, our slider leverages gesture behaviors, requiring little 'commitment' from the viewers. Version 2.0 builds on the previous cursor/finger movements and add support for triggering the slider on scroll. Scroll down to see the example below in action.
Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. Think of it like a flipbook made with Javascript, instead of paper. All you need is a set of images, and jQuery.
It's a fresh alternative to the typical 'click-to-slide' JQuery gallery, plus the slider works on mobile!
Installing the slider is fairly simple. Download Turntable.js and include turntable.min.js in your javascript file or at the bottom of your html document, and call the turntable function on whatever list of images you want to flip through. Oh, and don't forget the CSS. We've included a minified file, or you can just copy and paste the CSS here into your custom stylesheet. Easy peasy.
Also, while it might go without saying, since this is a JQuery slider, but you will need to make sure JQuery is properly installed. If you try to initialize the slider without JQuery, it won't work.
<div id="myTurntable" class="turntable">
<ul>
<li data-img-src="images/myPic1.jpg"></li>
<li data-img-src="images/myPic2.jpg"></li>
<li data-img-src="images/myPic3.jpg"></li>
<li data-img-src="images/myPic4.jpg"></li>
<li data-img-src="images/myPic5.jpg"></li>
<li data-img-src="images/myPic6.jpg"></li>
<li data-img-src="images/myPic7.jpg"></li>
<li data-img-src="images/myPic8.jpg"></li>
<li data-img-src="images/myPic9.jpg"></li>
<li data-img-src="images/myPic10.jpg"></li>
<li data-img-src="images/myPic11.jpg"></li>
<li data-img-src="images/myPic12.jpg"></li>
<li data-img-src="images/myPic13.jpg"></li>
<li data-img-src="images/myPic14.jpg"></li>
</ul>
</div>
$('#myTurntable').turntable();
.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;
}
Turntable.js will accept an object as a parameter. There are three keys you can use to customize the slider. You can decide if you want to flip through the images as your mouse moves along the X or Y axis of the container, or as you scroll down the page using axis. If you want to reverse the direction it goes through the images, pass in reverse: true. You can also decide where the container will start to turn while you scroll down the page. Try playing around with the different options until you find what works best for you. You can pass in the object when you call the plugin like this -
$('#mySpinnyContainer').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'
});
The plugin will default to the X axis if no option is provided.
We've been blown away by the support this simple JQuery slider has gotten. Check out what others are saying online and join the conversation. If you've found it useful, we'd love to hear from you.
Find us on Twitter at @polarnotion or @morganjlopes. Show us what you've built with the slider.
"Forget that expensive 3-D rendering, just put a series of images together and you're creating a rather dynamic and wholly immersive experience."
v 2.0