{"id":16594703,"url":"https://github.com/trevanhetzel/slidebox","last_synced_at":"2025-10-29T12:30:26.330Z","repository":{"id":11872157,"uuid":"14432461","full_name":"trevanhetzel/slidebox","owner":"trevanhetzel","description":"Slidebox is a super tiny jQuery carousel slider with lightbox-like image enlargement","archived":false,"fork":false,"pushed_at":"2013-12-17T15:14:58.000Z","size":208,"stargazers_count":7,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-16T22:27:33.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/trevanhetzel.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":"2013-11-15T18:57:47.000Z","updated_at":"2024-04-16T22:27:33.102Z","dependencies_parsed_at":"2022-09-19T11:41:00.387Z","dependency_job_id":null,"html_url":"https://github.com/trevanhetzel/slidebox","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevanhetzel%2Fslidebox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevanhetzel%2Fslidebox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevanhetzel%2Fslidebox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevanhetzel%2Fslidebox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trevanhetzel","download_url":"https://codeload.github.com/trevanhetzel/slidebox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857801,"owners_count":16556055,"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-11T23:47:12.043Z","updated_at":"2025-10-29T12:30:26.023Z","avatar_url":"https://github.com/trevanhetzel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Slidebox\n========\n\nSlidebox is a super tiny jQuery carousel slider with lightbox-like image enlargement. I've used this on several client projects in the past, so decided to let it out into the wild! Feel free to use or modify as you wish.\n\n## Features\n\n- Sliding carousel\n- Prev/Next buttons \u0026 keyboard arrow carousel controls\n- Lightbox-like image enlargement\n- Image captions\n- Barebones styling to make it super easy to insert into your own design\n\n\nUsage\n========\n\n## 1. Reference jQuery \u0026 the Slidebox library\n\n## 2. Initialize slidebox\n\nSlidebox needs to be initialized, either in ```\u003cscript\u003e``` tags at the bottom of your HTML, or in a separate JavaScript file, like so:\n\n\t\tslidebox({\n            container : \".carousel-cont\",\n            leftTrigger : \".carousel-left\",\n            rightTrigger : \".carousel-right\",\n            speed : \"fast\",\n            length : \"200\"\n        });\n\n### Parameters\n\n#### Slidebox currently accepts only five parameters.##\n\n**container**\nThe div containing the ```.carousel``` unordered list.\n\n**leftTrigger**\nThe element to show previous items.\n\n**rightTrigger**\nThe element to show next items.\n\n**speed**\nHow fast it slides.\n\n**length**\nThe amount (in pixels) it slides left or right at a time. Usually equal to the width of the images, if they're a consistent width.\n\n\n\n## 3. Mark it up\n\nFor the slider to work, it requires an unordered list with a class of ```.carousel``` and a containing element with a class of whatever you'd like (```.carousel-cont``` is what I like to use). This containing element is what needs to be passed in to the ```container``` object.\n\nThe lightbox portion of the plugin uses the source of the anchors in each list item as the enlarged source image. Captions can easily be added using the ```data-caption``` attribute. So the markup should look something like this:\n\n\t\t\u003cdiv class=\"carousel-left\"\u003ePrev\u003c/div\u003e\n\t    \u003cdiv class=\"carousel-right\"\u003eNext\u003c/div\u003e\n\t        \n        \u003cdiv class=\"carousel-cont\"\u003e\n            \u003cul class=\"carousel\"\u003e\n                \u003cli\u003e\n                    \u003ca href=\"http://lorempixel.com/800/500\"\u003e\n                        \u003cimg src=\"http://lorempixel.com/200/150\" data-caption=\"This is a caption\"\u003e\n                    \u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ca href=\"http://placekitten.com/800/650\"\u003e\n                        \u003cimg src=\"http://placekitten.com/200/150\" data-caption=\"This is another caption\"\u003e\n                    \u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ca href=\"http://placesheen.com/825/1200\"\u003e\n                        \u003cimg src=\"http://placesheen.com/200/150\" data-caption=\"This is a caption\"\u003e\n                    \u003c/a\u003e\n                \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n\n## 4. Styling\n\nI've purposely left out any skinning, as this is meant to fit into multiple layouts and contexts. However, the few styles that are in ```/demo/style.css``` are needed for everything to work. You can tweak as desired. The CSS is barebones so it should fit seamlessly into any layouts, responsive or static, with a little of your own touch.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrevanhetzel%2Fslidebox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrevanhetzel%2Fslidebox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrevanhetzel%2Fslidebox/lists"}