{"id":33169544,"url":"https://github.com/netgfx/PhaseSlider","last_synced_at":"2025-11-20T19:01:00.576Z","repository":{"id":58237245,"uuid":"42641244","full_name":"netgfx/PhaseSlider","owner":"netgfx","description":"A slider UI component for Phaser.io Javascript library","archived":false,"fork":false,"pushed_at":"2017-11-22T13:27:27.000Z","size":483,"stargazers_count":45,"open_issues_count":3,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-07T21:40:25.091Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netgfx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-17T07:19:27.000Z","updated_at":"2025-05-04T20:25:06.000Z","dependencies_parsed_at":"2022-08-30T22:30:52.118Z","dependency_job_id":null,"html_url":"https://github.com/netgfx/PhaseSlider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/netgfx/PhaseSlider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgfx%2FPhaseSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgfx%2FPhaseSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgfx%2FPhaseSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgfx%2FPhaseSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netgfx","download_url":"https://codeload.github.com/netgfx/PhaseSlider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgfx%2FPhaseSlider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285494607,"owners_count":27181443,"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","status":"online","status_checked_at":"2025-11-20T02:00:05.334Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2025-11-16T01:00:33.530Z","updated_at":"2025-11-20T19:01:00.568Z","avatar_url":"https://github.com/netgfx.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# PhaseSlider\nA slider UI component for Phaser.io Javascript library\n\n\u003ch3\u003eInitialize the slider in your preload function\u003c/h3\u003e\n\n```\nslider = new phaseSlider(game); //make sure to have slider publicly available\n```\n\nAnd then simply construct your slider in the main function of your game or anywhere else\n\n```\nslider.createSlider({\n    customSliderBG: false,\n    mode: \"horizontal\",\n    sliderBGAlpha: 0.8,\n    width: 500,\n    height: 400,\n    x: game.width / 2 - 500 / 2,\n    y: game.height / 2 - 400 / 2,\n    objects:[block1, block2, block3, block4, block5]\n  });\n  ```\n\n\u003cimg src=\"http://netgfx.com/trunk/randomPICS/phaseslider_zpspiwz98ly.gif\"/\u003e  \n  \n\u003e\u003cstrong\u003eView examples:\u003c/strong\u003e\n\u003ca href=\"http://www.netgfx.com/trunk/games/libs/phaseslider/examples/example1.html\"\u003eAdvanced example\u003c/a\u003e | \n\u003ca href=\"http://www.netgfx.com/trunk/games/libs/phaseslider/examples/index.html\"\u003eSimple example\u003c/a\u003e\n  \n  \u003chr\u003e\n  \n\u003cstrong\u003eGeneral Options:\u003c/strong\u003e\n\n\u003cul\u003e\n\t\u003cli\u003e\u003cstrong\u003emode:\u003c/strong\u003e Type of movement for the slides (default horizontal, vertical-from-bottom, vertical-from-top)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003ewidth:\u003c/strong\u003e The width of the slider (default 500 pixels)\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eheight:\u003c/strong\u003e The height of the slider (default 400 pixels)\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003ex\u003c/strong\u003e The x position of the slider (default 0)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003ey\u003c/strong\u003e The y position of the slider (default 0)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eobjects\u003c/strong\u003e An array of sprites or groups that will be the slides (added as they appear on the array left-\u003eright)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eanimationDuration: \u003c/strong\u003e This sets the speed of the animation while sliding (default: 600ms)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eanimationEasing:\u003c/strong\u003e The easing applied to the sliding animation (default Phaser.Easing.Cubic.Out)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003esliderBG\u003c/strong\u003e A single color to paint the background of the slider (default #35d2e0)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003ecustomSliderBG\u003c/strong\u003e A cache value to serve as a background for the slider (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003esliderBGAlpha\u003c/strong\u003e The alpha value for the slider background (default 1)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003ecustomHandleNext\u003c/strong\u003e A cache value for the the right arrow (if omited the liv has a build-in image to place)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003ecustomHandlePrev\u003c/strong\u003e A cache value for the the left arrow (if omited the liv has a build-in image to place)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eshowHandles\u003c/strong\u003e Whether or not to show arrows for slider navigation (default true)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonNextCallback\u003c/strong\u003e A callback function to be called when the slider navigates forward (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonPrevCallback\u003c/strong\u003e A callback function to be called when the slider navigates backwards (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eautoAnimate\u003c/strong\u003e If we want the slider to aumatically rotate the slider (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eanimationDelay\u003c/strong\u003e The delay between slide change when autoAnimate is set to true (default 2s)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003emodal\u003c/strong\u003e Add a black modal behind the slider (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003emodalAlpha\u003c/strong\u003e The amount of alpha (opacity) for the slider modal (default 0.7)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003estaticElements\u003c/strong\u003e The static elements that need to be added but not move (default [])\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonPrePrevCallback\u003c/strong\u003e The function to call `before` the slider moves to the `previous` slide (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonPreNextCallback\u003c/strong\u003e The function to call `before` the slider moves to the `next` slide (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonAfterPrevCallback\u003c/strong\u003e The function to call `after` the slider moves to the `previous` slide (default false)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eonAfterNextCallback\u003c/strong\u003e The function to call `after` the slider moves to the `next` slide (default false)\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cstrong\u003eAPI Functions\u003c/strong\u003e\n\n\u003cul\u003e\n\t\u003cli\u003e\u003cstrong\u003ecreateSlider\u003c/strong\u003e | Creates the slider object and the slides\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003estartSlider\u003c/strong\u003e | Starts the automatic rotation of the slider if autoAnimate is set to true\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003estopSlider\u003c/strong\u003e | Stops the automatic rotation of slides\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003emoveToSlide\u003c/strong\u003e | Navigate to specific slide index (args: index:Number, animated:Boolean)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003egoToNext\u003c/strong\u003e | Navigate to the next slide\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003egoToPrev\u003c/strong\u003e | Navigate to the previous slide\u003c/li\u003e\t\n\t\u003cli\u003e\u003cstrong\u003egetCurrentIndex\u003c/strong\u003e | Receive the current slide index\u003c/li\u003e\t\n\t\u003cli\u003e\u003cstrong\u003ehideSlider\u003c/strong\u003e | Render the slider not visible (the slider will not be able to receive input events)\u003c/li\u003e\n\t\u003cli\u003e\u003cstrong\u003eshowSlider\u003c/strong\u003e | Render the slider visible\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ci\u003e\n*Note: When automatic rotation has started, navigating from the control arrows (next, prev) will stop the auto animation\n\u003c/i\u003e\n\n\u003chr\u003e\n\n\u003ePlease let me know if you come across some bug or have something to contribute\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetgfx%2FPhaseSlider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetgfx%2FPhaseSlider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetgfx%2FPhaseSlider/lists"}