{"id":13591917,"url":"https://github.com/creativeaura/threesixty-slider","last_synced_at":"2026-02-22T19:33:19.838Z","repository":{"id":6002330,"uuid":"7225361","full_name":"creativeaura/threesixty-slider","owner":"creativeaura","description":"jQuery 360 image slider plugin","archived":false,"fork":false,"pushed_at":"2018-11-18T07:34:10.000Z","size":30782,"stargazers_count":854,"open_issues_count":43,"forks_count":230,"subscribers_count":64,"default_branch":"master","last_synced_at":"2026-01-24T04:05:31.123Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://creativeaura.github.io/threesixty-slider","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/creativeaura.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-18T15:15:29.000Z","updated_at":"2025-12-18T07:49:34.000Z","dependencies_parsed_at":"2022-08-30T20:01:04.710Z","dependency_job_id":null,"html_url":"https://github.com/creativeaura/threesixty-slider","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/creativeaura/threesixty-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativeaura%2Fthreesixty-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativeaura%2Fthreesixty-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativeaura%2Fthreesixty-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativeaura%2Fthreesixty-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creativeaura","download_url":"https://codeload.github.com/creativeaura/threesixty-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativeaura%2Fthreesixty-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29724485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T19:31:23.314Z","status":"ssl_error","status_checked_at":"2026-02-22T19:31:18.643Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:01:03.634Z","updated_at":"2026-02-22T19:33:19.816Z","avatar_url":"https://github.com/creativeaura.png","language":"JavaScript","readme":"# Hello All, I am not maintaining this plugin anymore. \n\n![Three Sixty Image slider plugin](https://raw.github.com/creativeaura/threesixty-slider/master/assets/360.png)\n\n\n\nThree Sixty Image slider plugin v2.0.5\n=================\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/creativeaura/threesixty-slider/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n[![Build Status](https://travis-ci.org/creativeaura/threesixty-slider.svg?branch=master)](https://travis-ci.org/creativeaura/threesixty-slider)\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/creativeaura/threesixty-slider?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\nThis 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.\n\n**Features**\n\n- Smooth Animation\n- Plenty of option parameters for customization\n- Api interaction\n- Simple mouse interaction\n- Custom behavior tweaking\n- Support for touch devices\n- Easy to integrate\n- No flash\n- Plugin integration\n\nPlugins\n---------------------\n\n- [Drupal module](https://drupal.org/sandbox/coderider/2274229) by [Rashid Abdullah](https://drupal.org/u/coderider)\n\nInstallation\n---------------------\n\nGit\n\n    git clone https://github.com/creativeaura/threesixty-slider.git\n\nOr install using bower\n\n    bower install threesixty-slider\n\nExample 1\n---------------------\n### Javascript ######\n    window.onload = init;\n\n    var product;\n    function init(){\n\n        product1 = $('.product1').ThreeSixty({\n            totalFrames: 72, // Total no. of image you have for 360 slider\n            endFrame: 72, // end frame for the auto spin animation\n            currentFrame: 1, // This the start frame for auto spin\n            imgList: '.threesixty_images', // selector for image list\n            progress: '.spinner', // selector to show the loading progress\n            imagePath:'assets/product1/', // path of the image assets\n            filePrefix: 'ipod-', // file prefix if any\n            ext: '.jpg', // extention for the assets\n            height: 265,\n            width: 400,\n            navigation: true,\n            disableSpin: true // Default false\n        });\n\n    }\n\n### HTML Snippet ######\n\n    \u003cdiv class=\"threesixty product1\"\u003e\n        \u003cdiv class=\"spinner\"\u003e\n            \u003cspan\u003e0%\u003c/span\u003e\n        \u003c/div\u003e\n        \u003col class=\"threesixty_images\"\u003e\u003c/ol\u003e\n    \u003c/div\u003e\nHere we are initializing an image slider for product 1. The ThreeSixty class constructor require a config object with properties like totalFrame, endFrame and currentFrame\n\n\nDocumentation\n---------------------\n##### Methods\n\nPublic methods to control the slider after initialization.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eMethod Name\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e.play()\u003c/td\u003e\u003ctd\u003eFunction to trigger the auto rotation of the slider\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e.stop()\u003c/td\u003e\u003ctd\u003eFunction to stop the auto play\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e.next()\u003c/td\u003e\u003ctd\u003eFunction to move the slider to next frame\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e.previous()\u003c/td\u003e\u003ctd\u003eFunction to move the slider to previous frame\u003c/td\u003e\n  \u003c/tr\u003e\n \u003ctr\u003e\n    \u003ctd\u003e.gotoAndPlay()\u003c/td\u003e\u003ctd\u003eUse this function if you want the slider spin to a particular frame with animation.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n##### Config\n\nHere are the list of config value you can pass in while you initilize your 360 slider.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eConfig\u003c/th\u003e\u003cth\u003eDefault value\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003etotalFrames\u003c/td\u003e\u003ctd\u003e180\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eSet total number for frames used in the 360 rotation\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ecurrentFrame\u003c/td\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eSet the starting from of the auto spin on initilize\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003eendFrame\u003c/td\u003e\u003ctd\u003e180\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eSet the frame where you want the auto spin to stop\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003eframerate\u003c/td\u003e\u003ctd\u003e60\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eFramerate for the spin animation\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003efilePrefix\u003c/td\u003e\u003ctd\u003e''\u003c/td\u003e\u003ctd\u003eString\u003c/td\u003e\u003ctd\u003efile prefiex for the assets if you assets name is nike_boot_1.png then filePrefix will be nike_boot_\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003eext\u003c/td\u003e\u003ctd\u003epng\u003c/td\u003e\u003ctd\u003eString\u003c/td\u003e\u003ctd\u003eFile extension for all the assets\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\u003ctd\u003e300\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eHeight you want to set for the three sixty container\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\u003ctd\u003e300\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eWidth you want to set for the three sixty container\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003estyle\u003c/td\u003e\u003ctd\u003e{}\u003c/td\u003e\u003ctd\u003eObject\u003c/td\u003e\u003ctd\u003eObject container styles for the preloader similar to jQuery.css({})\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003enavigation\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003eSet false if you don't want default navigation controls\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003eautoplayDirection\u003c/td\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eControl the direction of the spin depending on your assets. You can use 1 or -1\u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003edrag\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003eSet false if you want to disable mouse and touch events on the slider.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisableSpin\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003eWill disable the initial spin on load\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ezeroPadding\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003etrue will add 0 padding for file names 1 - 9\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eresponsive\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003eEnable responsive width for 360\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n      \u003ctd\u003eonReady\u003c/td\u003e\u003ctd\u003efunction() {}\u003c/td\u003e\u003ctd\u003eFunction\u003c/td\u003e\u003ctd\u003eCallback triggers once all images are loaded and ready to render on the screen\u003c/td\u003e\n    \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003eplaySpeed\u003c/td\u003e\u003ctd\u003e100\u003c/td\u003e\u003ctd\u003eNumber\u003c/td\u003e\u003ctd\u003eValue to control the speed (in milliseconds) of play button rotation\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ezeroBased\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eBoolean\u003c/td\u003e\u003ctd\u003eZero based for image filenames starting at 0\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nDemo\n---------------------\n- [Example 1 Default Settings](http://360slider.com/default_control.html)\n- [Example 2 Custom controls](http://360slider.com/custom_controls.html)\n- [Responsive](http://360slider.com/responsive.html)\n- [With Plugins](http://360slider.com/plugins.html)\n- [Fullscreen](http://360slider.com/full_page_scrolling.html)\n\nBrowsers Supported\n---------------------\n![Browsers Supported](https://raw.github.com/creativeaura/threesixty-slider/master/assets/browser_logos-64.png)\n\nThis plugin is supported in all browsers including our beloved IE 6\n\n\nSupport\n---------------------\nFor support and question please contact at [gaurav@jassal.me](mailto:gaurav@jassal.me) or follow at [@gauravjassal](http://twitter.com/gauravjassal)\n\n\nLICENSE\n---------\n\nCopyright 2013 Gaurav Jassal\n\nReleased under the MIT and GPL Licenses.\n","funding_links":[],"categories":["Images","JavaScript"],"sub_categories":["Data Table"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeaura%2Fthreesixty-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativeaura%2Fthreesixty-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeaura%2Fthreesixty-slider/lists"}