神刀安全网

Turntable.js: A Responsive JQuery Slider

What is this?

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.

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

Installation

The installation process is fairly simple. Download Turntable.js and include turntable.min.js in your javascript 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.

<div id="myTurntable" class="turntable">   <ul>     <li data-img-src="images/myPic1.jpg"></li>     <li data-img-src="images/myPic2.jpg"></li>     <li data-img-src="images/myPic3.jpg"></li>     <li data-img-src="images/myPic4.jpg"></li>     <li data-img-src="images/myPic5.jpg"></li>     <li data-img-src="images/myPic6.jpg"></li>     <li data-img-src="images/myPic7.jpg"></li>     <li data-img-src="images/myPic8.jpg"></li>     <li data-img-src="images/myPic9.jpg"></li>     <li data-img-src="images/myPic10.jpg"></li>     <li data-img-src="images/myPic11.jpg"></li>     <li data-img-src="images/myPic12.jpg"></li>     <li data-img-src="images/myPic13.jpg"></li>     <li data-img-src="images/myPic14.jpg"></li>   </ul> </div>
$('#myTurntable').turntable();
.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;  }

Settings

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.

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

The plugin will default to the X axis if no option is provided.

v 1.0

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Turntable.js: A Responsive JQuery Slider

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址