Turntable.js :: A Responsive JQuery Slider
A jQuery plugin that will flip through a list of images as your mouse sweeps across a container
Usage
All image sources need to be included in a data attribute on the li, and the image tags will be dynamically added. Make sure it is called data-img-src, followed by the link to your images.
There is very minimal css for the slider, but is necessary for its function. Feel free to copy and paste this code into your css file, or include a link for this.
HTML
<div id="myTurntable" class="turntable">
<ul>
<li data-img-src="./images/0.jpg"></li>
<li data-img-src="./images/1.jpg"></li>
<li data-img-src="./images/2.jpg"></li>
<li data-img-src="./images/3.jpg"></li>
<li data-img-src="./images/4.jpg"></li>
<li data-img-src="./images/5.jpg"></li>
</ul>
</div>
Javascript
$('#myTurntable').turntable();
CSS
.turntable {
display: inline-block;
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;
}
Settings
The plugin accepts one setting, the axis object. You can decide if you want to flip through the images as your mouse moves along the x or y axis of the container. You can pass the options in 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 x if no option is provided.
### Dependencies
***
jQuery
537 Dec 8, 2022
1 Feb 8, 2022
6.7k Jan 3, 2023
1.7k Nov 25, 2022
6.8k Dec 16, 2022
6 Jan 20, 2022
9 May 20, 2022
21 Apr 22, 2022
23 Dec 31, 2022
0 Sep 27, 2022
7 Aug 15, 2022
4 May 12, 2021
600 Dec 8, 2022
1.3k Dec 14, 2022
1.9k Dec 27, 2022
7 Dec 20, 2022
8 Jun 9, 2022
1 May 26, 2021
704 Dec 28, 2022