Hello All, I am not maintaining this plugin anymore.
Three Sixty Image slider plugin v2.0.5
This is a jQuery plugin to create 360 degree product image slider. The plugin is full customizable with number of options provided. The plugin have the power to display images in any angle 360 degrees. This feature can be used successfully in many use cases e.g. on an e-commerce site to help customers look products in detail, from any angle they desire.
Features
- Smooth Animation
- Plenty of option parameters for customization
- Api interaction
- Simple mouse interaction
- Custom behavior tweaking
- Support for touch devices
- Easy to integrate
- No flash
- Plugin integration
Plugins
Installation
Git
git clone https://github.com/creativeaura/threesixty-slider.git
Or install using bower
bower install threesixty-slider
Example 1
Javascript
window.onload = init;
var product;
function init(){
product1 = $('.product1').ThreeSixty({
totalFrames: 72, // Total no. of image you have for 360 slider
endFrame: 72, // end frame for the auto spin animation
currentFrame: 1, // This the start frame for auto spin
imgList: '.threesixty_images', // selector for image list
progress: '.spinner', // selector to show the loading progress
imagePath:'assets/product1/', // path of the image assets
filePrefix: 'ipod-', // file prefix if any
ext: '.jpg', // extention for the assets
height: 265,
width: 400,
navigation: true,
disableSpin: true // Default false
});
}
HTML Snippet
<div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images"></ol>
</div>
Here we are initializing an image slider for product 1. The ThreeSixty class constructor require a config object with properties like totalFrame, endFrame and currentFrame
Documentation
Methods
Public methods to control the slider after initialization.
Config
Here are the list of config value you can pass in while you initilize your 360 slider.
Demo
Browsers Supported
This plugin is supported in all browsers including our beloved IE 6
Support
For support and question please contact at gaurav@jassal.me or follow at @gauravjassal
LICENSE
Copyright 2013 Gaurav Jassal
Released under the MIT and GPL Licenses.