{"id":14482544,"url":"https://github.com/keithjgrant/slidebox","last_synced_at":"2025-08-30T03:31:12.899Z","repository":{"id":8559874,"uuid":"10185469","full_name":"keithjgrant/slidebox","owner":"keithjgrant","description":"AngularJS directive for horizontal scrolling","archived":true,"fork":false,"pushed_at":"2013-05-24T01:37:44.000Z","size":188,"stargazers_count":10,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-04T00:03:29.123Z","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":"paulirish/break-on-access","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keithjgrant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-21T01:33:32.000Z","updated_at":"2023-01-28T21:28:53.000Z","dependencies_parsed_at":"2022-09-13T03:10:17.987Z","dependency_job_id":null,"html_url":"https://github.com/keithjgrant/slidebox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithjgrant%2Fslidebox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithjgrant%2Fslidebox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithjgrant%2Fslidebox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithjgrant%2Fslidebox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keithjgrant","download_url":"https://codeload.github.com/keithjgrant/slidebox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231434557,"owners_count":18376105,"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-09-03T00:01:10.994Z","updated_at":"2024-12-27T03:31:07.307Z","avatar_url":"https://github.com/keithjgrant.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Slidebox\n========\n\n*AngularJS Directive for horizontal scrolling*\n\nHorizontal scrolling on the web always seems better on paper than in\npractice.  This is my attempt at a sane, user-friendly approach to\nthat problem.  Slidebox is friendly to both desktop computers and\ntouch devices.\n\nThis will overlay two large buttons on either side of the content\nfor scrolling left and right.  Hover the mouse over a button to\nscroll in that direction; the closer to the edge the mouse goes,\nthe faster the content scrolls.  And the regular old scrollbar is\nstill there for use. On a touch device, the content scrolls at a\nconstant speed while one of the control buttons is pressed.\n\nLive demo\n---------\nhttp://codepen.io/keithjgrant/pen/vqnaA\n\nTo Use\n------\nAll you need is js/slidebox.js, css/slidebox.css, and the images.  Add those\nto your project and include the 'Slidebox' module. Everything else in this\nrepository has to do with the demo and unit tests.\n\nTo view the demo, clone the repository into a local directory and open demo.html.\n\nMarkup example\n--------------\n\n```\u003cslidebox speed=\"25\" content-width=\"1000px\" content-class=\"my-sb-content\"\u003e\n    Your content here!\n\u003c/slidebox\u003e```\n\nAll attributes are optional.\n\n**speed** -- Default value is 25.\n\n**content-width** -- Width of the *inner* content.  May be specified in \npx, em, or any other standard CSS unit Alternately, you may specify the\nwidth in your stylesheet by selecting either the \"slidebox-content\" class\nor another class specified with the \"content-class\" attribute.\n\n**content-class** -- Space-seperated class names to be applied to the\n*inner* content div.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeithjgrant%2Fslidebox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeithjgrant%2Fslidebox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeithjgrant%2Fslidebox/lists"}