Skip to content
A Responsive JQuery Slider
HTML JavaScript CSS ApacheConf
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Update header meta. Dec 2, 2016
js updated app html, removed static site from demo folder, we shouldnt h… May 31, 2016
sass Update Index.html. Jun 2, 2016
spec
turntable
.gitignore initial commit Mar 17, 2016
.jscsrc initial commit Mar 17, 2016
Readme.md updated readme with some of the new settings May 31, 2016
gulpfile.js packing for deployment, working on readme Mar 22, 2016
package.json

Readme.md

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
You can’t perform that action at this time.