{"id":15541906,"url":"https://github.com/markcellus/carousel-js","last_synced_at":"2025-12-12T03:13:59.800Z","repository":{"id":30343578,"uuid":"33895979","full_name":"markcellus/carousel-js","owner":"markcellus","description":"Easily implement a dynamic carousel using minimal javascript. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.","archived":false,"fork":false,"pushed_at":"2017-06-10T20:17:31.000Z","size":1536,"stargazers_count":15,"open_issues_count":2,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-24T23:24:12.520Z","etag":null,"topics":["carousel","carousel-component","carousel-view","carousels","javascript","thumbnails"],"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/markcellus.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-04-13T21:50:55.000Z","updated_at":"2024-05-30T04:47:22.000Z","dependencies_parsed_at":"2022-07-31T22:18:02.501Z","dependency_job_id":null,"html_url":"https://github.com/markcellus/carousel-js","commit_stats":null,"previous_names":["mkay581/carousel-module","mkay581/carousel-js"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/markcellus/carousel-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fcarousel-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fcarousel-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fcarousel-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fcarousel-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markcellus","download_url":"https://codeload.github.com/markcellus/carousel-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fcarousel-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27675333,"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-12-12T02:00:06.775Z","response_time":129,"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":["carousel","carousel-component","carousel-view","carousels","javascript","thumbnails"],"created_at":"2024-10-02T12:20:00.659Z","updated_at":"2025-12-12T03:13:59.740Z","avatar_url":"https://github.com/markcellus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/mkay581/carousel-js.svg?branch=master)](https://travis-ci.org/mkay581/carousel-js)\n[![npm version](https://badge.fury.io/js/carousel-js.svg)](https://badge.fury.io/js/carousel-js)\n\n# Carousel\n\nA lightweight and flexible Carousel class that allows you to build fully functional, advanced Carousels with minimal javascript and markup.\nThis library is built using native vanilla javascript (for performance) and adheres to latest ECMAScript specs.\nSupports IE10+, all major browsers and even mobile.\n\n## Inspiration\n\nThis is a module that I built originally to solve many of the headaches and complexities around building flexible\nand scalable carousels.\n\nThis library has been used and adopted on many projects, including:\n\n* [fallout4.com](http://www.fallout4.com)\n* [mobile USPS.com](http://m.usps.com)\n* [barclaycardus.com](http://barclaycardus.com)\n\n## Installation\n\nYou can install as an npm package if using a build system like [Browserify](http://browserify.org/). \n\n```\nnpm install carousel-js --save-dev\n```\n\n## Usage\n\n### Carousel\n\nYou can create a carousel based off of a set of predetermined markup. Assuming you have the appropriate elements\nalready in the DOM and have your CSS set up correctly to show and hide the styles. You can setup Carousel\nand navigate to panels programmatically.\n\n```javascript\nvar carousel = new Carousel({\n    panels: document.getElementsByClassName('carousel-panel')\n});\n\ncarousel.goTo(1); // go to second carousel panel\n```\n\n### Carousel with Clickable Thumbnails\n\nCreate a carousel with thumbnails based off of a set of predetermined markup. Assuming, you have your html in the DOM and CSS\nset up correctly. You can use the Carousel class to add interactivity:\n\n```javascript\nvar thumbnails = document.getElementsByClassName('carousel-thumbnail');\n\nvar carousel = new Carousel({\n    panels: document.getElementsByClassName('carousel-panel'),\n    thumbnails: thumbnails\n});\n\n// click on second thumbnail to show second panel\nthumbnails[1].click();\n```\n\nMore details and example can be found [here](examples/carousel-with-thumbnails.html).\n\n### Carousel Image Lazy Loading\n\nThe carousel class also allows lazy loading images so that you can ensure that large image assets\nonly load when transitioning to the panel they reside in. This saves us from hogging the user's bandwidth and downloading\nall image assets before a user navigates to it.\nTo use the lazy loading functionality, let's assume you have the following in the DOM already:\n\n```html\n\u003cdiv class=\"carousel-panel\"\u003e\n    \u003cimg data-lazy-src=\"http://www.gstatic.com/webp/gallery/1.jpg\" src=\"\" /\u003e\n\u003c/div\u003e\n\u003cdiv class=\"carousel-panel\"\u003e\n    \u003cimg data-lazy-src=\"http://www.gstatic.com/webp/gallery/2.jpg\" src=\"\" /\u003e\n\u003c/div\u003e\n```\n\nThen you can do this:\n\n```javascript\nvar carousel = new Carousel({\n    panels: document.getElementsByClassName('carousel-panel'),\n    panelActiveClass: 'carousel-panel-active',\n    lazyLoadAttr: 'data-lazy-src',\n    assetLoadingClass: 'image-loading'\n});\n\n// go to second panel and lazy load the image it contains\ncarousel.goTo(1);\n\n```\n\nA more in-depth, working example of Carousel's lazy loading can be found [here](examples/carousel-image-lazy-loading.html).\n\n### Carousel with Arrows\n\nYou can easily create a carousel with the traditional left and right arrows. Assuming you have the following markup\nand styles in the DOM, you can do something like this:\n\n\n```javascript\nvar leftArrowElement = document.getElementsByClassName('carousel-left-arrow')[0];\nvar rightArrowElement = document.getElementsByClassName('carousel-right-arrow')[0];\n\nvar carousel = new Carousel({\n    panels: document.getElementsByClassName('carousel-panel'),\n    leftArrow: leftArrowElement,\n    rightArrow: rightArrowElement,\n    arrowDisabledClass: 'arrow-disabled'\n});\n\n// go to first panel which will add a css class on the left arrow to disable it\ncarousel.goTo(0);\n\n// click right arrow to navigate to next panel\n// which will remove the disabled css class from the left arrow\nrightArrowElement.click();\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkcellus%2Fcarousel-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkcellus%2Fcarousel-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkcellus%2Fcarousel-js/lists"}