\n\n# Scroll Carousel\n\nSimple content slider, works on scroll. Absolutely free for use. Thriving for precision & community growth.\n\n[NPM](https://www.npmjs.com/package/scroll-carousel) | [Documentation](https://asif-jalil.github.io/scroll-carousel-website) | [Demos](https://asif-jalil.github.io/scroll-carousel-website/#demos)\n\n**Note:** This carousel only operates in browser.\n\n## Contents\n\n- [Features](#features)\n- [Install](#install)\n- [Usage](#usage)\n- [Browser Support](#browser-support)\n- [License](#license)\n- [Contributors](#contributors)\n\n## Features\n\n- **Mobile friendly:** It is meant to be utilized in mobile web apps and mobile websites.\n- **Autoplay:** Scroll carousel supports autoplay.\n- **Library Agnostic:** It is significantly smaller and faster because it doesn't need any JavaScript libraries like jQuery.\n- **Responsive:** It is responsive by default.\n- **Typescript support:** Scroll carousel is fully typed.\n\n## Install\n\n### Download\n\n- CSS\n\n - [scroll.carousel.min.css](https://cdn.jsdelivr.net/npm/scroll-carousel@1.2.7/dist/scroll.carousel.min.css)\n\n- JS\n - [scroll.carousel.min.js](https://cdn.jsdelivr.net/npm/scroll-carousel@1.2.7/dist/scroll.carousel.min.js)\n\n### CDN\n\nTo get started with **Scroll Carousel** right away, there are a few CDN available to serve the file faster:\n\n- [jsDelivr](https://www.jsdelivr.com/package/npm/scroll-carousel)\n\n##### Example usign jsDelivr\n\nAdd a link to the css file in your ``:\n\n```\n\n```\n\nThen, before your closing `` tag, add:\n\n```\n\n```\n\n### Package managers\n\n##### npm\n\n```\nnpm install scroll-carousel\n```\n\nUsing with npm needs import js and css. Let's see -\n\nImport JS in your js file\n\n```\nimport ScrollCarousel from 'scroll-carousel';\n```\n\nImport CSS in your css file\n\n```\n@import 'node_modules/scroll-carousel/dist/scroll.carousel.css';\n```\n\n## Usage\n\nScroll Carousel basically works with a container element and a set of child item elements. Wrap your item elements (`div`, `a`, `span`, `li` etc) with a container element (`div`, `ul` etc).\n\n```\n
\n
...
\n
...
\n
...
\n ...\n
\n```\n\n**NOTE:** `my-carousel` class name is not mandatory. You can use any class or id name according to your choice and need.\n\n#### Initialize with vanilla Javascript\n\nInitialize the Scroll Carousel with `new` keyword.\n\n```\nnew ScrollCarousel(\".my-carousel\", {\n ...options\n})\n```\n\nor,\n\n```\nconst myCarousel = document.querySelector(\".my-carousel\");\n\nnew ScrollCarousel(myCarousel, {\n ...options\n})\n```\n\n#### Initialize with HTML\n\nYou can initialize **Scroll Carousel** in HTML, without writing any JavaScript. Add `data-carousel` attribute to the carousel element. Options can be set in its value.\n\n```\n
\n
...
\n
...
\n
...
\n ...\n
\n```\n\n### Options\n\n| Option | Type | Default | Description |\n| ------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |\n| speed | `number` | 7 | The value given is how fast you want to move on the scroll. It needs to be greater than 0. |\n| smartSpeed | `boolean` | false | To calculate the speed of how fast or slow you are scrolling a website. |\n| margin | `number` | 10 | To make gap between two slide |\n| slideSelector | `string` | null | Select the slides with a class name you want to select for the carousel. Other elements will behave as simple. |\n| autoplay | `boolean` | false | The option will allow the slides move automatically and still you will have the ability to handle sliding speed on scroll. |\n| autoplaySpeed | `number` | 5 | Control autoplay speed. It needs to be greater than 0 |\n| direction | `string` | 'rtl' | Control direction left to right or right to left. Two possible option - `ltr` or `rtl` |\n\n##### Example with options\n\n```\nnew ScrollCarousel(\".my-carousel\", {\n speed: 15,\n autoplay: true,\n autoplaySpeed: 5,\n smartSpeed: true,\n slideSelector: \".my-slide\",\n direction: \"rtl\",\n margin: 10\n})\n```\n\nor,\n\n```\n
\n
...
\n
...
\n
...
\n ...\n
\n```\n\n> :warning: Options set in HTML must be valid JSON. Keys need to be quoted, for example \"speed\":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes \".\n\n### Methods\n\n| Method | Return | Description |\n| --------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |\n| destroy() | void | Remove ScrollCarousel functionality completely. `destroy` will return the element back to its pre-initialized state. |\n| reinit() | ScrollCarousel{} | This will initialize your carousel after destroy with previous options and returned the `ScrollCarousel` instance. |\n\n##### Example of methods\n\n```\nlet scrollCarousel = new ScrollCarousel(\".my-carousel\", {\n speed: 15,\n autoplay: true,\n smartSpeed: true,\n slideSelector: \".my-slide\"\n})\n\ndocument.querySelector('#button').addEventListener('click', function () {\n if(scrollCarousel.isActive) {\n scrollCarousel.destroy();\n } else {\n scrollCarousel = scrollCarousel.reinit()\n }\n});\n```\n\n### Events\n\n| Event | Description |\n| ------- | --------------------------------------------------------- |\n| ready | This event will fire when the plugin is ready to action |\n| destroy | This event will fire when the destroy method is being hit |\n| move | This event will fire when the carousel is on move |\n\n##### Example of events\n\n```\nlet scrollCarousel = new ScrollCarousel(\".my-carousel\", {\n speed: 15,\n autoplay: true,\n smartSpeed: true,\n slideSelector: \".my-slide\",\n on: {\n ready: function () {\n console.log(\"Be ready\");\n },\n destroy: function () {\n console.log(\"Destroyed\");\n }\n }\n})\n\nscrollCarousel.on(\"move\", function (progress) {\n consol.log(progress);\n})\n```\n\n## Browser support\n\n**Desktop:** Firefox 8+ ✓ Chrome 15+ ✓ (Should works on Chrome 4-14 as well, but I couldn't test it.) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓\n\n**Mobile:** Android Browser 4.2+ ✓ Chrome Mobile 63+ ✓ Firefox Mobile 28+ ✓ Maxthon 4+ ✓\n\n## License\n\nThe code and the documentation are released under the [MIT License](LICENSE).\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CODE_CONTRIBUTORS.md)].\n\n\n\n\n\n","readmeFilename":"README.md"}
![](\"https://media.giphy.com/media/aOMbzVumN3KsEHnb0h/giphy.gif\")
\n![\"top](\"https://img.shields.io/github/languages/top/asif-jalil/scroll-carousel\")
![\"npm](\"https://img.shields.io/bundlephobia/minzip/scroll-carousel\")
![\"npm\"](\"https://img.shields.io/npm/dw/scroll-carousel\")
![\"GitHub\"](\"https://img.shields.io/github/license/asif-jalil/scroll-carousel\")