{"id":13658427,"url":"https://github.com/zoltantothcom/vanilla-js-carousel","last_synced_at":"2025-04-24T08:32:20.553Z","repository":{"id":2858569,"uuid":"47655905","full_name":"zoltantothcom/vanilla-js-carousel","owner":"zoltantothcom","description":"Tiny (1Kb gzipped) JavaScript carousel with all the features most of us will ever need.","archived":false,"fork":false,"pushed_at":"2023-05-23T22:25:53.000Z","size":4555,"stargazers_count":92,"open_issues_count":7,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T22:54:35.249Z","etag":null,"topics":["carousel","javascript","javascript-carousel","slider","vanilla-javascript","vanilla-javascript-carousel"],"latest_commit_sha":null,"homepage":"http://zoltantothcom.github.io/vanilla-js-carousel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoltantothcom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-12-08T23:28:49.000Z","updated_at":"2024-10-13T18:07:00.000Z","dependencies_parsed_at":"2023-07-05T19:33:38.985Z","dependency_job_id":null,"html_url":"https://github.com/zoltantothcom/vanilla-js-carousel","commit_stats":{"total_commits":98,"total_committers":7,"mean_commits":14.0,"dds":0.6938775510204082,"last_synced_commit":"0ce3f130c05a657f88f6b7bb263bdb5f9ead9741"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltantothcom%2Fvanilla-js-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltantothcom%2Fvanilla-js-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltantothcom%2Fvanilla-js-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltantothcom%2Fvanilla-js-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoltantothcom","download_url":"https://codeload.github.com/zoltantothcom/vanilla-js-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223947406,"owners_count":17230021,"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","javascript-carousel","slider","vanilla-javascript","vanilla-javascript-carousel"],"created_at":"2024-08-02T05:00:59.484Z","updated_at":"2024-11-10T11:31:53.543Z","avatar_url":"https://github.com/zoltantothcom.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components"],"sub_categories":["Carousel"],"readme":"# Vanilla JavaScript Carousel\n\n[![Build Status](https://travis-ci.org/zoltantothcom/vanilla-js-carousel.svg?branch=master)](https://travis-ci.org/zoltantothcom/vanilla-js-carousel) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/vanilla-js-carousel/badge.svg?branch=master)](https://coveralls.io/github/zoltantothcom/vanilla-js-carousel?branch=master) ![Dependencies](https://img.shields.io/badge/dependencies-none-brightgreen.svg)\n\nTiny (_**1Kb gzipped**_) JavaScript carousel with all the features most of us will ever need.\n\n[![Vanilla JavaScript Carousel](https://raw.githubusercontent.com/zoltantothcom/vanilla-js-carousel/master/docs/images/carousel.jpg)](http://zoltantothcom.github.io/vanilla-js-carousel/)\n\n*— Inspired by the blazing fast, lightweight, cross-platform and crazy popular [Vanilla JS](http://vanilla-js.com/)  framework.*\n\n\n## Demo\n [**CAROUSEL**](http://zoltantothcom.github.io/vanilla-js-carousel \"Carousel Demo\")\n\n\n## Installation\n1. Via NPM:\n    ```js\n    npm install --save vanilla-js-carousel\n    ```\n    or in case you love shortcuts:\n    ```js\n    npm i --S vanilla-js-carousel\n    ```\n    \n2. Old school: \n    ```html\n    \u003cscript src=\"dist/vanilla-js-carousel.min.js\"\u003e\u003c/script\u003e\n    ```\n\n\n## Usage\n1. Include the CSS and feel free to edit it or write your own:\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"dist/vanilla-js-carousel.css\" /\u003e\n    ```\n\n2. Write some markup:\n    ```html\n    \u003cdiv class=\"js-Carousel\" id=\"carousel\"\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003cimg src=\"image-1.jpg\" alt=\"\"\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cimg src=\"image-2.jpg\" alt=\"\"\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cimg src=\"image-3.jpg\" alt=\"\"\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n    ```\n\n3. If you installed via NPM:\n    ```js\n    const Carousel = require(\"vanilla-js-carousel\");\n    ```\n\n4. Initialize the carousel:\n    ```js\n    var carousel = new Carousel({\n        elem: 'carousel',    // id of the carousel container\n        autoplay: false,     // starts the rotation automatically\n        infinite: true,      // enables the infinite mode\n        interval: 1500,      // interval between slide changes\n        initial: 0,          // slide to start with\n        dots: true,          // show navigation dots\n        arrows: true,        // show navigation arrows\n        buttons: false,      // hide play/stop buttons,\n        btnStopText: 'Pause' // STOP button text\n    });\n\n    // Show slide number 3 (Numeration of slides starts at 0)\n    carousel.show(2);\n\n    // Move to the next slide\n    carousel.next();\n    ```\n\n\n## Options\n\n#### Settings\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\nelem | string | carousel | The _id_ of the carousel container in the HTML markup\ninterval | int  | 3000 | Auto play interval in milliseconds\ninitial | int | 0 | Index of the slide to start on\nautoplay | boolean | false | Enables auto play of slides\ninfinite | boolean | false | Enables infinite mode\ndots | boolean | true | Display navigation dots\narrows | boolean | true | Display navigation arrows (\u003c*prev*\u003e/\u003c*next*\u003e)\nbuttons | boolean | true | Display navigation buttons (\u003c*stop*\u003e/\u003c*play*\u003e)\n\n#### Button titles\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\nbtnPlayText | string | Play | Text for \u003c*play*\u003e button\nbtnStopText | string | Stop | Text for \u003c*stop*\u003e button\narrPrevText | string | `\u0026lsaquo;` | Text for \u003c*prev*\u003e arrow\narrNextText | string | `\u0026rsaquo;` | Text for \u003c*next*\u003e arrow\n\n\n## Methods\nMethod | Argument | Description\n------ | -------- | -----------\n.show(index) | index: int | Moves the carousel to slide by index\n.live() | | Returns the current slide's index\n.prev() | | Triggers previous slide\n.next() | | Triggers next slide\n.play() | | Starts the autoplay\n.stop() | | Stops the autoplay\n\n\n## Running the tests\n```\nnpm test\n```\n\n\n## Browser support and dependencies\nBrowser | Support | Dependencies\n------ | -------- | -----------\nChrome | yes | -\nFirefox | yes | -\nSafari | yes | -\nOpera | yes | -\nIE | yes* | [Polyfill](//cdn.jsdelivr.net/classlist/2014.01.31/classList.min.js) for `.classList` in IE9\n\n\\* _IE9 and up_\n\n\n## Versioning\n\nThis project uses [SemVer](http://semver.org/) for versioning. For the versions available, see [the tags on this repository](https://github.com/zoltantothcom/vanilla-js-carousel/tags).\n\n\n## License\n\nAnyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.\n\nSee [Unlicense](http://unlicense.org) for full details.\n\n\n## Related\n\n* [Vanilla JavaScript **Dropdown**](https://github.com/zoltantothcom/vanilla-js-dropdown)\n* [Vanilla JavaScript **Tabs**](https://github.com/zoltantothcom/vanilla-js-tabs)\n* [Vanilla JavaScript **Tooltip**](https://github.com/zoltantothcom/vanilla-js-tooltip)\n* [Vanilla JavaScript **Accordion**](https://github.com/zoltantothcom/vanilla-js-accordion)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoltantothcom%2Fvanilla-js-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoltantothcom%2Fvanilla-js-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoltantothcom%2Fvanilla-js-carousel/lists"}