{"id":16314252,"url":"https://github.com/rustamwin/threesixty-slider","last_synced_at":"2025-03-22T20:35:53.834Z","repository":{"id":39786918,"uuid":"131685774","full_name":"rustamwin/threesixty-slider","owner":"rustamwin","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-01T22:25:59.000Z","size":24316,"stargazers_count":9,"open_issues_count":6,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T14:49:19.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rustamwin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-01T07:03:42.000Z","updated_at":"2024-09-26T08:58:45.000Z","dependencies_parsed_at":"2024-10-28T14:54:41.768Z","dependency_job_id":null,"html_url":"https://github.com/rustamwin/threesixty-slider","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustamwin%2Fthreesixty-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustamwin%2Fthreesixty-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustamwin%2Fthreesixty-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustamwin%2Fthreesixty-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rustamwin","download_url":"https://codeload.github.com/rustamwin/threesixty-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245020175,"owners_count":20548155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-10-10T21:53:29.919Z","updated_at":"2025-03-22T20:35:53.072Z","avatar_url":"https://github.com/rustamwin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hi, have now taken on this plugin. It's had a major rewrite.\n\n![Three Sixty Image slider plugin](https://raw.github.com/etetlow/threesixty-slider/master/assets/logo@263.png)\n\nThree Sixty Image slider plugin v2.5.2\n=================\n[![Built with Grunt](https://cdn.gruntjs.com/builtwith.svg)](https://gruntjs.com/)\n\nThis 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.\ne.g. on an e-commerce site to help customers look at products in detail, from any angle they desire.\n\n**Features**\n\n- Smooth Animation\n- Plenty of options\n- Simple mouse interaction\n- Support for touch devices\n- Easy to integrate\n- No flash\n- Fullscreen now included as an option with the addition of [screenfull.js](https://sindresorhus.com/screenfull.js)\n\nInstallation\n---------------------\n\ngit clone https://github.com/etetlow/threesixty-slider.git\n\nnpm install -g grunt-cli\n\nnpm install\n\ngrunt build\n\ngrunt\n\nExample 1\n---------------------\n### JavaScript ######\n\n    $(document).ready(function() {\n        var product1;\n        product1 = $('.product1').ThreeSixty({\n            totalFrames: 72, // total number of images you have for 360 slider\n            endFrame: 72, // end frame for the auto spin animation\n            currentFrame: 1, // 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 to the images\n            filePrefix: 'ipod-', // file prefix if any\n            ext: '.jpg', // extension for the assets\n            height: 265, // height of images\n            width: 400, // width of images\n            navigation: true, // default navigation controls\n            position: 'bottom-center', // position of controls\n            disableSpin: false, // if you want to disable the auto spin\n            responsive: true, // full aspect ratio responsiveness\n            fullscreen: true, // fullscreen capabilities\n            fSBackgroundColor: '#000', // fullscreen background color\n            autoplayDirection: 1, // direction of play\n            zeroPadding: true // if your images are padded to the same number of characters by 0\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\n\n\nHere we are initializing an image slider for product 1. The ThreeSixty class constructor requires a config object with properties like totalFrame, endFrame and currentFrame\n\nNB: 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\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\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e.play()\u003c/td\u003e\n        \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\n        \u003ctd\u003eFunction to stop the auto play\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e.next()\u003c/td\u003e\n        \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\n        \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\n        \u003ctd\u003eUse this function if you want the slider spin to a particular frame with animation.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e.fullscreen()\u003c/td\u003e\n        \u003ctd\u003eFunction to enter and exit fullscreen mode.\u003c/td\u003e\n\u003c/table\u003e\n\n### Configuration #####\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e#\u003c/th\u003e\n            \u003cth\u003eConfig\u003c/th\u003e\n            \u003cth\u003eDefault value\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003cth\u003e1\u003c/th\u003e\n            \u003ctd\u003etotalFrames\u003c/td\u003e\n            \u003ctd\u003e180\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eSet total number of frames used in the 360 rotation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e2\u003c/th\u003e\n            \u003ctd\u003ecurrentFrame\u003c/td\u003e\n            \u003ctd\u003e1\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eSet the starting point of the auto spin on initilise\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e3\u003c/th\u003e\n            \u003ctd\u003eendFrame\u003c/td\u003e\n            \u003ctd\u003e180\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eSet the frame where you want the auto spin to stop\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e4\u003c/th\u003e\n            \u003ctd\u003eframerate\u003c/td\u003e\n            \u003ctd\u003e60\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eFramerate for the spin animation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e6\u003c/th\u003e\n            \u003ctd\u003efilePrefix\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003ctd\u003eFile prefix for your images. If your file's name is foo-bar-001.png then filePrefix will be foo-bar-\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e7\u003c/th\u003e\n            \u003ctd\u003eext\u003c/td\u003e\n            \u003ctd\u003epng\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003ctd\u003eFile extension of your images\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e8\u003c/th\u003e\n            \u003ctd\u003eheight\u003c/td\u003e\n            \u003ctd\u003e300\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eHeight of your images\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e9\u003c/th\u003e\n            \u003ctd\u003ewidth\u003c/td\u003e\n            \u003ctd\u003e300\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eWidth of your images\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e10\u003c/th\u003e\n            \u003ctd\u003estyle\u003c/td\u003e\n            \u003ctd\u003e{}\u003c/td\u003e\n            \u003ctd\u003eObject\u003c/td\u003e\n            \u003ctd\u003eObject container styles for the preloader similar to jQuery.css({})\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e11\u003c/th\u003e\n            \u003ctd\u003enavigation\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eSet false if you don't want default navigation controls\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e12\u003c/th\u003e\n            \u003ctd\u003eposition\u003c/td\u003e\n            \u003ctd\u003etop-right\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003ctd\u003eSets the position of the navigation bar within the slider.\u003cbr /\u003eChoice of 'top-left', 'top-center,' 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e13\u003c/th\u003e\n            \u003ctd\u003eautoplayDirection\u003c/td\u003e\n            \u003ctd\u003e1\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eControl the direction of the spin dependent on your images. You can use 1 or -1\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e14\u003c/th\u003e\n            \u003ctd\u003edrag\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \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            \u003cth\u003e15\u003c/th\u003e\n            \u003ctd\u003edisableSpin\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eWill disable the initial spin on load\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e16\u003c/th\u003e\n            \u003ctd\u003ezeroPadding\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eSet true if your numbering is 0 padded to the same character length\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e17\u003c/th\u003e\n            \u003ctd\u003eresponsive\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eEnables full aspect-ratio responsiveness\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e18\u003c/th\u003e\n            \u003ctd\u003efullscreen\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eSet true to add a fullscreen icon to the navigation bar when clicked will put your slider in fullscreen\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e19\u003c/th\u003e\n            \u003ctd\u003efSBackgroundColor\u003c/td\u003e\n            \u003ctd\u003ewhite\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003ctd\u003eSets the fullscreen background color\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e20\u003c/th\u003e\n            \u003ctd\u003eonReady\u003c/td\u003e\n            \u003ctd\u003efunction() {}\u003c/td\u003e\n            \u003ctd\u003eFunction\u003c/td\u003e\n            \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            \u003cth\u003e21\u003c/th\u003e\n            \u003ctd\u003eplaySpeed\u003c/td\u003e\n            \u003ctd\u003e100\u003c/td\u003e\n            \u003ctd\u003eInteger\u003c/td\u003e\n            \u003ctd\u003eValue to control the speed (in milliseconds) of play button rotation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003e22\u003c/th\u003e\n            \u003ctd\u003ezeroBased\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003ctd\u003eZero based for image filenames starting at 0\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\nBrowsers Supported\n---------------------\n![Browsers Supported](https://raw.github.com/etetlow/threesixty-slider/master/assets/browser_logos-64.png)\n\nThis plugin is supported in all browsers including our beloved IE 6\nSome of the added features will only work in more modern browsers\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\nLICENSE\n---------\nCopyright 2013 Gaurav Jassal\nReleased under the MIT and GPL Licenses.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustamwin%2Fthreesixty-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frustamwin%2Fthreesixty-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustamwin%2Fthreesixty-slider/lists"}