{"id":18263155,"url":"https://github.com/vanillawc/wc-carousel-lite","last_synced_at":"2025-04-04T20:31:05.879Z","repository":{"id":101920802,"uuid":"282695477","full_name":"vanillawc/wc-carousel-lite","owner":"vanillawc","description":"A web component that wraps HTML elements and forms a horizontal carousel slider out of them.","archived":false,"fork":false,"pushed_at":"2021-05-16T17:34:49.000Z","size":51,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T19:20:16.853Z","etag":null,"topics":["carousel","carousel-slider","custom-elements","html","javascript","vanilla-web-component","web-components"],"latest_commit_sha":null,"homepage":"http://135.181.40.67/wc-carousel-lite/","language":null,"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/vanillawc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-26T17:05:17.000Z","updated_at":"2023-10-29T16:52:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"28d7fdd3-5e99-4f29-b01f-5c0eea371927","html_url":"https://github.com/vanillawc/wc-carousel-lite","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-carousel-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-carousel-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-carousel-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-carousel-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanillawc","download_url":"https://codeload.github.com/vanillawc/wc-carousel-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247246274,"owners_count":20907764,"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","carousel-slider","custom-elements","html","javascript","vanilla-web-component","web-components"],"created_at":"2024-11-05T11:09:59.979Z","updated_at":"2025-04-04T20:31:05.869Z","avatar_url":"https://github.com/vanillawc.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-carousel-lite/releases\"\u003e\u003cimg src=\"https://badgen.net/github/tag/vanillawc/wc-carousel-lite\" alt=\"GitHub Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vanillawc/wc-carousel-lite\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@vanillawc/wc-carousel-lite\" alt=\"NPM Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@vanillawc/wc-carousel-lite\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/@vanillawc/wc-carousel-lite\" alt=\"Bundlephobia\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-carousel-lite/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-carousel-lite/workflows/Latest/badge.svg\" alt=\"Latest Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-carousel-lite/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-carousel-lite/workflows/Release/badge.svg\" alt=\"Release Status\"\u003e\u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/aSWYgtybzV\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/723296249121603604?color=%23738ADB\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n# wc-carousel-lite\n\nA web component that wraps HTML elements and forms a horizontal carousel slider out of them.\n\nLive demo available [here.](http://135.181.40.67/wc-carousel-lite/)\n\n## Features\nWc-carousel-lite is a standalone vanilla JS web component that does not use shadow DOM.\n\nComponent features include:\n- content agnostic: carousel items should be able to contain any HTML\n- responsive: adapts to different screen widths automatically\n- infinite looping of items\n- support for swipe gestures (mouse \u0026 touch)\n- keyboard control (left/right arrow)\n- autoplay\n\n## Usage\n- create item containers by assigning item class to them\n- add content inside the containers\n- wrap the item containers inside a carousel component\n- set necessary carousel style (width, height)\n\n**HTML example:**\n\n ```html\n     \u003cwc-carousel-lite\u003e\n        \u003cdiv class='item' style=\"width:200px\"\u003e\n          \u003cimg src=\"./myimage_1.png\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class='item' style=\"width:100px\"\u003e\n          \u003cimg src=\"./myimage_2.png\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class='item' style=\"width:300px\"\u003e\n          \u003cimg src=\"./myimage_3.png\"\u003e\n        \u003c/div\u003e\n     \u003c/wc-carousel-lite\u003e    \n ```\n**Styling the carousel:**\n\n ```css\n   wc-carousel-lite {\n    height: 200px;\n    width: 500px;\n    margin: auto;\n    display: flex;\n  }\n```\n\n**Setting width of the space between items:**\n\n```css\n   .item {\n     margin-left: 20px;\n     margin-right: 20px;\n  }\n```\n\n**Another HTML example, using images directly as items:**\n\n ```html\n     \u003cwc-carousel-lite\u003e\n       \u003cimg src=\"./myimage_1.png\" class=\"item\" width=\"200\"\u003e\n       \u003cimg src=\"./myimage_2.png\" class=\"item\" width=\"100\"\u003e\n       \u003cimg src=\"./myimage_3.png\" class=\"item\" width=\"300\"\u003e\n     \u003c/wc-carousel-lite\u003e    \n ```\n\n**Note! Carousel item widths should always be set explicitly.**\n\n## Including the component to an HTML file\n\n1. Import polyfill, this is not needed for modern browsers:\n\n    ```html\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.4.2/custom-elements.min.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import custom element:\n\n    ```html\n    \u003cscript defer src='wc-carousel-lite.min.js'\u003e\u003c/script\u003e\n    ```\n\n3. Start using it!\n\n    ```html\n     \u003cwc-carousel-lite\u003e\n       \u003cimg src=\"https://placekitten.com/g/400/200\" class=\"item\" width=\"400\"\u003e\n       \u003cimg src=\"https://placekitten.com/g/300/200\" class=\"item\" width=\"300\"\u003e\n       \u003cimg src=\"https://placekitten.com/g/250/200\" class=\"item\" width=\"250\"\u003e      \n     \u003c/wc-carousel-lite\u003e    \n    ```\n\n## Including the component from NPM\n\n1. Install and import polyfill, this is not needed for modern browsers:\n\n   See https://www.npmjs.com/package/@webcomponents/custom-elements\n\n2. Install wc-menu-wrapper NPM package:\n\n    ```console\n    npm i @vanillawc/wc-carousel-lite\n    ```\n\n3. Import custom element:\n\n    ```javascript\n    import '@vanillawc/wc-carousel-lite'\n    ```\n\n4. Start using it:\n\n   ```javascript\n   let carousel = document.createElement(\"wc-carousel-lite\");\n   carousel.transitionDuration = 1000;\n   carousel.infinite = true;\n   carousel.autoplay = true;\n   carousel.centerBetween = true;\n   \n   let img = document.createElement(\"img\");\n   img.setAttribute(\"src\", \"./myimage_1.png\");\n   img.setAttribute(\"width\", 300);\n   img.classList.add(\"item\");\n   carousel.appendChild(img);   \n   \n   let img_2 = document.createElement(\"img\");\n   img_2.setAttribute(\"src\", \"./myimage_2.png\");\n   img_2.setAttribute(\"width\", 300);\n   img_2.classList.add(\"item\");\n   carousel.appendChild(img_2);\n   \n   document.body.appendChild(carousel);\n   ```\n\n## Attributes\n\n### infinite\n\nIf defined, the carousel will be in infinite looping mode.\n\nBy default, the carousel will not be in infinite looping mode.\n\nThis attribute is a boolean attribute, also known as a valueless attribute.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite infinite\u003e\n```\n\n### init-item\n\nDefines which item will be initially shown at the carousel midpoint.\n\nItem numbering begins from zero.\n\nDefault value is 0.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite init-item=1\u003e\n```\n\n### autoplay\n\nIf defined, the carousel will automatically shift items.\n\nBy default, the the carousel will not shift items automatically.\n\nThis attribute is a boolean attribute, also known as a valueless attribute.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite autoplay\u003e\n```\n\n### interval\n\nDefines autoplay shift interval in milliseconds.\n\nDefault value is 1000.\n\nThis value must be equal or bigger than transition duration.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite interval=2000\u003e\n```\n\n### transition-duration\n\nDefines item shift duration in milliseconds.\n\nDefault value is 0, meaning that that the shift takes place instantly.\n\nThis value must be equal or smaller than interval.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite transition-duration=1000\u003e\n```\n\n### transition-type\n\nDefines the speed curve of the item shift transition effect.\n\nFor possible attribute values, see https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp\n\nDefault value is 'ease'.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite transition-type='linear'\u003e\n```\n\n### center-between\n\nIf defined, the items are centered so that the carousel midpoint is between the items.\n\nBy default, the items are centered so that the carousel midpoint is in the middle of item.\n\nThis attribute is a boolean attribute, also known as a valueless attribute.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite center-between\u003e\n```\n\n### direction\n\nDefines autoplay shift direction.\n\nAttribute value must be either 'right' or 'left'\n\nDefault value is left (items will shift to left).\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite direction='right'\u003e\n```\n\n### no-touch\n\nIf defined, touch swiping is disabled.\n\nBy default, touch swiping is enabled.\n\nThis attribute is a boolean attribute, also known as a valueless attribute.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite no-touch\u003e\n```\n\n### item\n\nDefines new item class name, if the default class name 'item' can not be used.\n\nHTML example:\n\n```html\n\u003cwc-carousel-lite item='slide'\u003e\n  \u003cimg src=\"https://placekitten.com/g/400/200\" class=\"slide\" width=\"400\"\u003e\n  \u003cimg src=\"https://placekitten.com/g/300/200\" class=\"slide\" width=\"300\"\u003e\n  \u003cimg src=\"https://placekitten.com/g/250/200\" class=\"slide\" width=\"250\"\u003e      \n\u003c/wc-carousel-lite\u003e\n```\n\n### touchVelocityLimit\n\nDefines the swipe velocity limit for item shift boosting.\n\nWhen touch swipe velocity is bigger than the limit, items are shifted with an additional shift.\n\nDefault value is 1.5 (pixels per millisecond).\n\nThis attribute can't be assigned as an HTML attribute.\n\n### mouseVelocityLimit\n\nDefines the swipe velocity limit for item shift boosting.\n\nWhen mouse swipe velocity is bigger than the limit, items are shifted with an additional shift.\n\nDefault value is 3.0 (pixels per millisecond).\n\nThis attribute can't be assigned as an HTML attribute.\n\n### minShiftRequired\n\nMinimum horizontal swipe movement required to shift an item.\n\nDefault value is 30 (pixels).\n\nThis attribute can't be assigned as an HTML attribute.\n\n## Setting attributes dynamically\n\n*initItem* and *infinite* attributes should be set only when the carousel is not appended to DOM.\n\n*noTouch* value can't be changed once the carousel is appended to DOM.\n\nExample:\n\n   ```javascript\n   let carousel = document.createElement(\"wc-carousel-lite\");\n\n   carousel.initItem = 2;\n   carousel.transitionType = 'linear';\n   carousel.transitionDuration = 1000;\n   carousel.interval = 2000;\n   carousel.infinite = true;\n   carousel.autoplay = true;\n   carousel.centerBetween = true;\n   carousel.direction = right;\n   carousel.touchVelocityLimit = 1;\n   carousel.mouseVelocityLimit = 2;\n   carousel.minShiftRequired = 20;\n   carousel.noTouch = true;\n\n   // Add items:\n   let img = document.createElement(\"img\");\n   img.setAttribute(\"src\", \"./myimage_1.png\");\n   img.setAttribute(\"width\", 300);\n   img.classList.add(\"item\");\n   carousel.appendChild(img);   \n\n   let img_2 = document.createElement(\"img\");\n   img_2.setAttribute(\"src\", \"./myimage_2.png\");\n   img_2.setAttribute(\"width\", 300);\n   img_2.classList.add(\"item\");\n   carousel.appendChild(img_2);\n\n   // Finally append to DOM:\n   document.body.appendChild(carousel);\n   ```\n\n## Methods\n\nMethods should not be used unless the carousel is appended to DOM.\n\n### next( shift )\n\nShifts items to left.\n\nParameter shift is a number indicating the number of items to be shifted.\n\nParameter default value is 1.\n\n### prev( shift )\n\nShifts items to right.\n\nParameter shift is a number indicating the number of items to be shifted.\n\nParameter default value is 1.\n\n### goto( index )\n\nCenters item according to index.\n\nParameter index is a number indicating the item ordinal number beginning from zero.\n\n### play\n\nStarts autoplay.\n\n### stop\n\nStops autoplay.\n\n## Adding and removing items dynamically\n\nCarousel does not have specific methods to add / remove items dynamically.\n\nWhen carousel is appended to DOM, items can not be added or removed.\n\nTo add / remove items dynamically, do the following:\n\n1. Remove carousel from DOM\n2. Add / remove items from the carousel by using appendChild / remove\n3. Append carousel back to DOM\n\n## Default attribute values\n\nDefault values are defined and modifiable in the custom element constructor.\n\nSee file *wc-carousel-lite.js* in *dist* folder.\n\n```javascript\n    this.item = \"item\";\n    this.initItem = 0;\n    this.transitionDuration = 0;\n    this.transitionType = \"ease\";\n    this.interval = 1000;\n    this.direction = \"left\";\n    this.touchVelocityLimit = 1.5; // pixels per millisecond\n    this.mouseVelocityLimit = 3.0; // pixels per millisecond\n    this.minShiftRequired = 30; // minimum x shift required to shift the item (pixels)\n```\n\nInfinite, no-touch, center-between and autoplay are all disabled by default and not initialized in constructor at all.\n\nTo enable them by default, add following lines to constructor:\n\n```javascript\n    this.infinite = true;\n    this.noTouch = true;\n    this.centerBetween = true;\n    this.autoplay = true;\n```\n\n## Building\n\nUnminified scripts in the dist folder can be used and modified as such, there are no build scripts available for them.\n\nBuilding is done by executing the minifier script minify.cmd, which is a Linux bash shell script.\n\nMinify.cmd can be found from dist folder.\n\nBuilding (minifying) requires [terser](https://github.com/terser/terser) command line tool to be installed. It can be installed with following command:\n```console\n npm install terser -g\n   ```\n## Contributing\n\nQuestions, suggestions and bug reports are welcome. Safari testing would be nice.\n\n## To do\n\n- dots\n- add / remove item methods\n\n## License\n\nCopyright (c) 2020 Jussi Utunen\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-carousel-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanillawc%2Fwc-carousel-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-carousel-lite/lists"}