<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Turntable.js : A Responsive JQuery Slider</title>

<meta property="og:title" content="Turntable.js : A Responsive JQuery Slider" />

<meta property="og:type" content="website" />

<meta property="og:url" content="http://polarnotion.github.io/turntable/" />

<meta property="og:image" content="" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/animate.css">

<link rel="stylesheet" href="css/main.css">

<nav class="navbar navbar-fixed-top">

<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Turntable.js</a>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">

<li>

<a href="#install">Install</a>

</li>

<a href="https://s3.amazonaws.com/turntable-slider/TurntableSlider.zip" class="btn btn-white-outline navbar-btn">Download</a>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

<header class="pad-section position-9">

<div class="container">

<div class="header-overlay turntable" id="turntable">

<ul>

<li data-img-src="images/planter/plant1.JPG"></li>

<li data-img-src="images/planter/plant28.JPG"></li>

<li data-img-src="images/planter/plant27.JPG"></li>

<li data-img-src="images/planter/plant26.JPG"></li>

<li data-img-src="images/planter/plant25.JPG"></li>

<li data-img-src="images/planter/plant24.JPG"></li>

<li data-img-src="images/planter/plant23.JPG"></li>

<li data-img-src="images/planter/plant22.JPG"></li>

<li data-img-src="images/planter/plant21.JPG"></li>

<li data-img-src="images/planter/plant20.JPG"></li>

<li data-img-src="images/planter/plant19.JPG"></li>

<li data-img-src="images/planter/plant18.JPG"></li>

<li data-img-src="images/planter/plant17.JPG"></li>

<li data-img-src="images/planter/plant16.JPG"></li>

<li data-img-src="images/planter/plant15.JPG"></li>

<li data-img-src="images/planter/plant14.JPG"></li>

<li data-img-src="images/planter/plant13.JPG"></li>

<li data-img-src="images/planter/plant12.JPG"></li>

<li data-img-src="images/planter/plant11.JPG"></li>

<li data-img-src="images/planter/plant10.JPG"></li>

<li data-img-src="images/planter/plant9.JPG"></li>

<li data-img-src="images/planter/plant8.JPG"></li>

<li data-img-src="images/planter/plant7.JPG"></li>

<li data-img-src="images/planter/plant6.JPG"></li>

<li data-img-src="images/planter/plant5.JPG"></li>

<li data-img-src="images/planter/plant4.JPG"></li>

<li data-img-src="images/planter/plant3.JPG"></li>

<li data-img-src="images/planter/plant2.JPG"></li>

<li data-img-src="images/planter/plant1.JPG"></li>

</ul>

<div class="container-center">

<h1 class="text-color">Turntable.js</h1>

<p class="text-color lead">A Responsive JQuery Slider</p>

</div>

</div>

</header>

<section class="pad-section background-white position-99">

<div class="container">

<h2 id="examples">What is this?</h2>

<p class="lead">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.</p>

<p class="lead">

It's a fresh alternative to the typical 'click-to-slide' JQuery gallery.

</p>

<h2 id="install">Installation</h2>

<p class="lead">The installation process is fairly simple. <b>Download Turntable.js</b> and include turntable.min.js in your javascript file or at the bottom of your html document, and <b>call the turntable function</b> 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.</p>

<div>

<!-- Nav tabs -->

<ul class="nav nav-pills" role="tablist">

<li role="presentation" class="active">

<a href="#html" aria-controls="home" role="tab" data-toggle="tab">HTML</a>

</li>

<li role="presentation">

<a href="#js" aria-controls="profile" role="tab" data-toggle="tab">JS</a>

</li>

<li role="presentation">

<a href="#css" aria-controls="profile" role="tab" data-toggle="tab">CSS</a>

</li>

</ul>

<br>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="html">

<pre class="prettyprint pad">

&lt;div id="myTurntable" class="turntable"&gt;

&lt;ul&gt;

&lt;li data-img-src="images/myPic1.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic2.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic3.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic4.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic5.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic6.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic7.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic8.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic9.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic10.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic11.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic12.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic13.jpg"&gt;&lt;/li&gt;

&lt;li data-img-src="images/myPic14.jpg"&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

</pre>

</div>

<div role="tabpanel" class="tab-pane" id="js">

<pre class="prettyprint pad language-java">

$('#myTurntable').turntable();

</pre>

</div>

<div role="tabpanel" class="tab-pane" id="css">

<pre class="prettyprint pad language-java">

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

}

</pre>

</div>

</div>

</div>

<h2 id="settings">Settings</h2>

<p class="lead">Turntable.js will accept an object as a parameter. 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 in the object when you call the plugin like this.</p>

<pre class="prettyprint pad language-java">

$('#mySpinnyContainer').turntable(

{axis: 'y'}

);

</pre>

<p class="lead">The plugin will default to the X axis if no option is provided.</p>

<br>

<p>v 1.0</p>

</div>

</section>

<footer class="text-center">

<div class="container">

<iframe src="https://ghbtns.com/github-btn.html?user=polarnotion&repo=turntable&type=star&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>

<iframe src="https://ghbtns.com/github-btn.html?user=polarnotion&type=follow&count=true&size=small" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

<br>

<br>

<p>

<a href="http://polarnotion.com/?ref=turntable" class="text-white" target="_blank">

Polar Notion

<br>

<em>Go Boldly Forward</em>

</a>

</p>

</div>

</footer>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<script type="text/javascript" src="./js/bootstrap.min.js"></script>

<script type="text/javascript" src="./js/main.js"></script>

<script type="text/javascript">

$('#turntable').turntable({axis: 'x'});