https://github.com/GoBoldlyForward/turntable
A Responsive JQuery Slider
https://github.com/GoBoldlyForward/turntable
Last synced: 5 months ago
JSON representation
A Responsive JQuery Slider
- Host: GitHub
- URL: https://github.com/GoBoldlyForward/turntable
- Owner: GoBoldlyForward
- Created: 2016-03-21T21:01:23.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-04-29T22:45:20.000Z (almost 6 years ago)
- Last Synced: 2025-08-19T00:21:33.404Z (8 months ago)
- Language: HTML
- Homepage: http://polarnotion.github.io/turntable/
- Size: 9.06 MB
- Stars: 513
- Watchers: 20
- Forks: 48
- Open Issues: 7
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
- awesome-frontend - Turntable.js - 轻易实现图像的3D旋转
- awesome-front-end - Turntable.js - 轻易实现图像的3D旋转
README
# 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
```html
-
-
-
-
-
-
```
##### Javascript
```javascript
$('#myTurntable').turntable();
```
##### CSS
```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.
```javascript
$('#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