<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 Slider</title>

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.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="#">TurntableSlider</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="./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/plant2.JPG"></li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</ul>

<div class="containt.jpgt-center">

<h1 class="text-color">TurntableSlider</h1>

<p class="text-color lead">A jQuery plugin</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">TurntableSlider is a jQuery plugin that will let you flip through a list of images as your mouse 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>

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

<p class="lead">The installation process is fairly simple. Just download TurntableSlider and include turntable.min.js in your javascritpt 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.</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">

<code>

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

</code>

</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">

.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">TurntableSlider 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">

<a href="http://polarnotion.com/" class="text-white"> © Polar Notion</a>

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

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

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

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

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

<script type="text/javascript">

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