{"id":16228524,"url":"https://github.com/poppa/carousel-js","last_synced_at":"2025-04-08T04:48:27.647Z","repository":{"id":13271313,"uuid":"74072819","full_name":"poppa/carousel-js","owner":"poppa","description":"A simple Javascript carousel with no library dependency and lazy image loading","archived":false,"fork":false,"pushed_at":"2023-01-04T14:57:32.000Z","size":2126,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-14T03:31:36.602Z","etag":null,"topics":["carousel","javascript-carousel"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/poppa.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":"2016-11-17T22:24:46.000Z","updated_at":"2023-05-29T17:51:28.000Z","dependencies_parsed_at":"2023-01-12T08:45:53.272Z","dependency_job_id":null,"html_url":"https://github.com/poppa/carousel-js","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/poppa%2Fcarousel-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poppa%2Fcarousel-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poppa%2Fcarousel-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poppa%2Fcarousel-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poppa","download_url":"https://codeload.github.com/poppa/carousel-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779763,"owners_count":20994572,"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":["carousel","javascript-carousel"],"created_at":"2024-10-10T12:55:41.541Z","updated_at":"2025-04-08T04:48:27.626Z","avatar_url":"https://github.com/poppa.png","language":"HTML","readme":"# Carousel.JS\n\u003c!-- catch --\u003e\nA simple Javascript carousel with no library dependencies, with lazy image loading and support for multiple image sources for the same item depending on device size.\n\nThis is not a fancy pancy full fledged carousel in any way, and that will never\nbe the purpose or goal either. If that's what you want then check out [Slick](http://kenwheeler.github.io/slick/) instead.\n\u003c!-- endcatch --\u003e\n\nFor real examples check out the [Carousel.JS](https://poppa.github.io/carousel-js/)\nweb page.\n\n\u003c!-- catch --\u003e\n---\n\n## Howto\n\nThe size of the carousel is determined by the size of its outer container. This means\nthat the carousel wrapper must have a given height in some way.\n\n---\n\n\u003c!-- endcatch --\u003e\n\u003c!-- catch(table)--\u003e\n\n### Carousel wrapper\n\nThe outer most `div` element of the carousel that contain all carousel content\n\n```html\n\u003cdiv class=\"carousel\"\n     data-carousel-delay=\"8000\"\n     data-carousel-indicators=\"\"\n     data-carousel-touch-threshold=\"40%\"\n     data-carousel-rubberband-swipe=\"1.5\"\u003e\n```\n\n| Attribute                        | Description                                  | Example  |\n| -------------------------------- | -------------------------------------------- | -------- |\n| `data-carousel-delay`            | Delay in milliseconds between rotations      | 10000    |\n| `data-carousel-indicators`       | Add indicators                               | No value |\n| `data-carousel-touch-threshold`  | x distance to swipe before transition starts. Can be either a fixed number (px) or in percent (%) | 100 or 50%      |\n| `data-carousel-rubberband-swipe` | Give a rubber band effect when swipeing.     | 1.5      |\n| `data-carousel-wrapper`          | CSS selector for the outer wrapper. Only used when `data-carousel-keep-img` and `data-carousel-auto-height` are used | .outer-wrapper |\n---\n\n### Carousel slider\n\nThis is the first child of the **Carousel wrapper**. This element takes no data attributes\n\n```html\n\u003cdiv class=\"carousel-slider\"\u003e\n```\n\n---\n\n### Carousel item\n\nThis container is the wrapper for every item in the carousel.\n\n```html\n\u003cdiv class=\"carousel-item\"\n     data-carousel-href=\"http://domain.com/path/\"\u003e\n```\n\n| Attribute                       | Description                                  | Example        |\n| ------------------------------- | -------------------------------------------- | -------------- |\n| `data-carousel-href`            | URL to goto when the item is clicked         | /internal/path |\n| `data-carousel-keep-img`        | Don't put the image as background, show the `\u003cimg\u003e` tag instead | \"(empty)\" |\n| `data-carousel-auto-height`     | Only used when `data-carousel-keep-img` is set. Will auto-adjust the wrapper height accorning to the height of the `\u003cimg\u003e`. This requires that `data-carousel-wrapper` is set on the **Carsousel wrapper** |\n\n---\n\n### Carousel item text\n\nThis container can contain any html.\n\n```html\n\u003cdiv class=\"carousel-item-text\"\u003e\n```\n\n---\n\n### Carousel item image\n\nThe image tag uses lazy loading so the best thing to do is to set the `src`\nattribute to point to an empty pixel image or something like that and use\nthe `carousel-*` attributes for the real image sources. The `img` tag has support\nfor arbitrary number of sources for different devices (or strictly speaking\nmedia width directives).\n\nThe `img` tag will not be displayed per se, but the `src` will rather be placed\nas a background image on the `carousel-item` element. But the `img` will only be\nvisibly hidden and still be accessible for screen readers for which, for\ninstance, the `alt` attribute will serve a purpose.\n\nIf the media directive attributes are used the priciple of mobile first is applied,\nso give the mobile version as value to the `data-carousel-src` attribute, which is\nthe default source attribute.\n\n```html\n\u003cimg src=\"empty/pixel.png\" alt=\"Image description\"\n     data-carousel-src=\"real-image.jpg\"\n     data-carousel-mq-414=\"real-tablet-image.jpg\"\n     data-carousel-mq-768=\"real-desktop-image.jpg\"\u003e\n```\n\n| Attribute                       | Description                                  | Example          |\n| ------------------------------- | -------------------------------------------- | ---------------- |\n| `data-carousel-src`             | Default image src                            | /images/img1.jpg |\n| `data-carousel-mq-(n)`          | Alternative image sources. `(n)` is an arbitrary number which will be set to the media directive `@media (min-width: (n)px)`                            | `data-carousel-mq-376='larger-than-iphone6-image.jpg'` |\n| `data-carousel-photo-credit`    | Show photo credit                            | Robert Capa      |\n| `data-carousel-photo-credit-mq-(n)` | Like `data-carousel-mq-(n)` above but for the photo credit. This is only needed if multiple sources are used and `(n)` should then match `(n)` of `data-carousel-mq-(n)` | Another Photographer |\n\n### The `Carousel` global object\n\nThis object has one static property (`null` by default) that if set with a\nfunction that function will be called when a slider item is clicked (if the\n`data-carousel-href` attribute is used on the item).\n\n```js\nCarousel.clickBack = function(item) {\n  // Check something....\n  // Return false if you want to abort the click\n  // For instance:\n  if (item.href.indexOf('http:') \u003e -1) {\n    window.top.location.href = item.href;\n    return false;\n  }\n}\n```\n\n\u003c!-- endcatch --\u003e\n\nSee the example below for a full implementation\n\n## Example/Boilerplate\n\n```html\n\u003cdiv class=\"my-carousel-wrapper\"\u003e\n  \u003c!--\n    8 seconds between item rotations\n    100 pixels horizontal swipe threshold to execute the rotation\n    Show indicators\n  --\u003e\n  \u003cdiv class=\"carousel\"\n       data-carousel-delay=\"8000\"\n       data-carousel-touch-threshold=\"100\"\n       data-carousel-indicators=\"\"\u003e\n    \u003cdiv class=\"carousel-slider\"\u003e\n      \u003c!-- Begin item --\u003e\n      \u003cdiv class=\"carousel-item\"\u003e\n        \u003cdiv class=\"carousel-item-text\"\u003e\n          \u003ch2\u003eArbitrary...\u003c/h2\u003e\n          \u003cp\u003e...text goes here...\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cimg src=\"empty-pixel.png\"  alt=\"...\"\n             data-carousel-src=\"path/to/mobile-image.jpg\"\n             data-carousel-mq-768=\"path/to/desktop-image.jpg\"\n             data-carousel-mq-414=\"path/to/tablet-image.jpg\"\u003e\n      \u003c/div\u003e\n\n      \u003c!-- Begin item --\u003e\n      \u003cdiv class=\"carousel-item\"\u003e\n        \u003cdiv class=\"carousel-item-text\"\u003e\n          \u003ch2\u003eArbitrary...\u003c/h2\u003e\n          \u003cp\u003e...text goes here...\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cimg src=\"empty-pixel.png\" alt=\"...\"\n             data-carousel-src=\"path/to/mobile-image-2.jpg\"\n             data-carousel-mq-768=\"path/to/desktop-image-2.jpg\"\n             data-carousel-mq-414=\"path/to/tablet-image-2.jpg\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoppa%2Fcarousel-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoppa%2Fcarousel-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoppa%2Fcarousel-js/lists"}