This is a jQuery plugin to create 360 degree image sliders. The plugin is fully customizable with a number of options provided. The plugin has the ability to display images in any angle 360 degrees. This feature can be used successfully in many cases. e.g. on an e-commerce site to help customers look at products in detail, from any angle they desire.
Features
git clone https://github.com/etetlow/threesixty-slider.git
npm install -g grunt-cli
npm install
grunt build
grunt
$(document).ready(function() {
var product1;
product1 = $('.product1').ThreeSixty({
totalFrames: 72, // total number of images you have for 360 slider
endFrame: 72, // end frame for the auto spin animation
currentFrame: 1, // 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 to the images
filePrefix: 'ipod-', // file prefix if any
ext: '.jpg', // extension for the assets
height: 265, // height of images
width: 400, // width of images
navigation: true, // default navigation controls
position: 'bottom-center', // position of controls
disableSpin: false, // if you want to disable the auto spin
responsive: true, // full aspect ratio responsiveness
fullscreen: true, // fullscreen capabilities
fSBackgroundColor: '#000', // fullscreen background color
autoplayDirection: 1, // direction of play
zeroPadding: true // if your images are padded to the same number of characters by 0
});
});
<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 requires a config object with properties like totalFrame, endFrame and currentFrame
NB: The image slider will now resize on load in reference to its parent element, so no matter what space is available, the image slider will accomodate as much as it can with its aspect ratio intact
Public methods to control the slider after initialization.
This plugin is supported in all browsers including our beloved IE 6 Some of the added features will only work in more modern browsers
For support and question please contact at [email protected] or follow at @gauravjassal
Copyright 2013 Gaurav Jassal Released under the MIT and GPL Licenses.