Threesixty-slider

jQuery 360 image slider plugin

Download .zip Download .tar.gz View on GitHub

Three Sixty Image slider plugin

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.

Example 3 Multiple Sliders in one page

Slider 1

0%

    Slider 2

    0%

      Javascript

      window.onload = init;
      
      var car;
      function init(){
      
          car = $('.car').ThreeSixty({
              totalFrames: 52, // Total no. of image you have for 360 slider
              endFrame: 52, // 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/car/', // path of the image assets
              filePrefix: '', // file prefix if any
              ext: '.png', // extention for the assets
              height: 1000,
              width: 447,
              navigation: true
          });
      
          boot = $('.boot').ThreeSixty({
              totalFrames: 26, // Total no. of image you have for 360 slider
              endFrame: 26, // 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/car/', // path of the image assets
              filePrefix: '', // file prefix if any
              ext: '.png', // extention for the assets
              height: 1000,
              width: 447,
              navigation: true
          });
      
      }
      

      HTML Snippet

      <div class="threesixty car">
          <div class="spinner">
              <span>0%</span>
          </div>
          <ol class="threesixty_images"></ol>
      </div>
      <div class="threesixty boot">
          <div class="spinner">
              <span>0%</span>
          </div>
          <ol class="threesixty_images"></ol>
      </div>
      

      Here we are initializing an image slider for car model. The ThreeSixty class constructor require a config object with properties like totalFrame, endFrame and currentFrame

      Support

      For support and question contact at gaurav@jassal.me or follow at @gauravjassal.