### Threesixty-Slider Configuration Options Source: https://github.com/rustamwin/threesixty-slider/blob/master/README.md This section details the various configuration options available for the threesixty-slider. These options control aspects like the total number of frames, starting and ending frames, image file naming conventions, animation speed, navigation controls, and responsiveness. ```APIDOC Threesixty-Slider Configuration: totalFrames: Integer - Set total number of frames used in the 360 rotation. - Default: 180 currentFrame: Integer - Set the starting point of the auto spin on initialize. - Default: 1 endFrame: Integer - Set the frame where you want the auto spin to stop. - Default: 180 framerate: Integer - Framerate for the spin animation. - Default: 60 filePrefix: String - File prefix for your images. If your file's name is foo-bar-001.png then filePrefix will be foo-bar-. - Default: '' ext: String - File extension of your images. - Default: 'png' height: Integer - Height of your images. - Default: 300 width: Integer - Width of your images. - Default: 300 style: Object - Object container styles for the preloader similar to jQuery.css({}). - Default: {} navigation: Boolean - Set false if you don't want default navigation controls. - Default: true position: String - Sets the position of the navigation bar within the slider. - Choices: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. - Default: 'top-right' autoplayDirection: Integer - Control the direction of the spin dependent on your images. You can use 1 or -1. - Default: 1 drag: Boolean - Set false if you want to disable mouse and touch events on the slider. - Default: true disableSpin: Boolean - Will disable the initial spin on load. - Default: false zeroPadding: Boolean - Set true if your numbering is 0 padded to the same character length. - Default: false responsive: Boolean - Enables full aspect-ratio responsiveness. - Default: false fullscreen: Boolean - Set true to add a fullscreen icon to the navigation bar when clicked will put your slider in fullscreen. - Default: false fSBackgroundColor: String - Sets the fullscreen background color. - Default: 'white' onReady: Function - Callback triggers once all images are loaded and ready to render on the screen. - Default: function() {} playSpeed: Integer - Value to control the speed (in milliseconds) of play button rotation. - Default: 100 zeroBased: Boolean - Zero based for image filenames starting at 0. - Default: false ``` -------------------------------- ### Initialize Threesixty Slider Source: https://github.com/rustamwin/threesixty-slider/blob/master/index.html Initializes the Threesixty Slider plugin on a selected element. This example shows common configuration options for setting up a 360-degree product view. ```javascript $(document).ready(function() { var three60 = $('.car').ThreeSixty({ totalFrames: 100, endFrame: 100, currentFrame: 1, imgList: '.threesixty_images', progress: '.spinner', imagePath: 'assets/set1/', filePrefix: '', ext: '.jpg', width: 670, height: 440, navigation: true, fullscreen: true, fSBackgroundColor: '#000', responsive: false, disableSpin: false, autoplayDirection: -1, zeroPadding: true }); }); ``` -------------------------------- ### JavaScript Initialization Source: https://github.com/rustamwin/threesixty-slider/blob/master/README.md Initializes the ThreeSixty slider with various configuration options for total frames, image paths, dimensions, and navigation. ```javascript $(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 }); }); ``` -------------------------------- ### ThreeSixty Slider API Methods Source: https://github.com/rustamwin/threesixty-slider/blob/master/README.md Details the public methods available to control the ThreeSixty slider after initialization, such as playing, stopping, navigating frames, and managing fullscreen mode. ```apidoc ThreeSixty Slider Public Methods: .play() - Function to trigger the auto rotation of the slider. .stop() - Function to stop the auto play. .next() - Function to move the slider to the next frame. .previous() - Function to move the slider to the previous frame. .gotoAndPlay(frameNumber) - Use this function if you want the slider to spin to a particular frame with animation. - Parameters: - frameNumber: The target frame number. .fullscreen() - Function to enter and exit fullscreen mode. ``` -------------------------------- ### Threesixty Slider Configuration Options Source: https://github.com/rustamwin/threesixty-slider/blob/master/index.html Demonstrates various configuration options for the Threesixty Slider plugin, including different image sets, dimensions, and responsiveness settings. ```javascript /* Configuration example for a different set of images: totalFrames: 33, endFrame: 33, currentFrame: 1, imgList: '.threesixty_images', progress: '.spinner', imagePath: 'assets/hand/', filePrefix: '', ext: '.jpg', width: 500, height: 685, navigation: true, fullscreen: true, responsive: true, disableSpin: false, zeroPadding: false, theme: 'dark' */ /* Configuration example for another set of images: totalFrames: 52, endFrame: 30, currentFrame: 1, imgList: '.threesixty_images', progress: '.spinner', imagePath: 'assets/car/', filePrefix: '', ext: '.png', height: 447, width: 1000, navigation: true, fullscreen: true, responsive: true, disableSpin: false, zeroPadding: false, theme: 'dark' */ ``` -------------------------------- ### HTML Structure Source: https://github.com/rustamwin/threesixty-slider/blob/master/README.md Provides the basic HTML structure required for the ThreeSixty slider, including a container for the slider, a progress indicator, and an ordered list for images. ```html
    ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.