{"id":13901422,"url":"https://github.com/gs-shop/vue-slick-carousel","last_synced_at":"2025-05-15T04:05:56.399Z","repository":{"id":36503745,"uuid":"222970390","full_name":"gs-shop/vue-slick-carousel","owner":"gs-shop","description":"πŸš₯Vue Slick Carousel with True SSR Written for ⚑Faster Luxstay","archived":false,"fork":false,"pushed_at":"2024-02-01T16:44:49.000Z","size":9668,"stargazers_count":818,"open_issues_count":168,"forks_count":184,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-14T09:55:43.167Z","etag":null,"topics":["carousel","frontend","javascript","nuxt","pwa","slick","slider","ssr","swiper","vue","vue-component"],"latest_commit_sha":null,"homepage":"https://gs-shop.github.io/vue-slick-carousel/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gs-shop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-11-20T15:36:57.000Z","updated_at":"2025-04-17T02:10:04.000Z","dependencies_parsed_at":"2024-01-02T23:29:35.799Z","dependency_job_id":"9085f5b8-7309-4cee-9745-95ee25b86989","html_url":"https://github.com/gs-shop/vue-slick-carousel","commit_stats":{"total_commits":165,"total_committers":5,"mean_commits":33.0,"dds":"0.042424242424242475","last_synced_commit":"2e8d7313b97ff6b86427694181c9e8a4bd7b27ff"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-shop%2Fvue-slick-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-shop%2Fvue-slick-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-shop%2Fvue-slick-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-shop%2Fvue-slick-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gs-shop","download_url":"https://codeload.github.com/gs-shop/vue-slick-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270646,"owners_count":22042859,"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","frontend","javascript","nuxt","pwa","slick","slider","ssr","swiper","vue","vue-component"],"created_at":"2024-08-06T21:01:22.799Z","updated_at":"2025-05-15T04:05:51.386Z","avatar_url":"https://github.com/gs-shop.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries","UI Components [πŸ”](#readme)"],"sub_categories":["UI Components"],"readme":"# vue-slick-carousel\n\n\u003e πŸš₯ Vue Slick Carousel with True SSR Written for Faster [Luxstay](https://www.luxstay.com). This Is a Port of [react-slick](https://github.com/akiran/react-slick).\n\n[![npm version](https://img.shields.io/npm/v/vue-slick-carousel.svg)](https://www.npmjs.com/package/vue-slick-carousel)\n[![bit](https://img.shields.io/bit/collection/total-components/gsshop/vue-slick-carousel)](https://bit.dev/gsshop/vue-slick-carousel/vue-slick-carousel)\n[![license](https://img.shields.io/npm/l/vue-slick-carousel)](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/gs-shop/vue-slick-carousel/issues?\u0026q=is%3Aissue+is%3Aopen)\n[![code with hearth by GSShop](https://img.shields.io/badge/gsshop-%3C%2F%3E%20-cadb2a.svg)](https://github.com/gs-shop)\n[![hearth for Luxstay](https://img.shields.io/badge/luxstay-%20%E2%99%A5%20-ff3333.svg)](https://www.luxstay.com)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\u003ca href=\"https://gitmoji.carloscuesta.me\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square\"\n alt=\"Gitmoji\"\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1215767/70643037-a8697b00-1c83-11ea-9bc0-a3ce71d0ef62.gif\" width=\"100%\"\u003e\n\n\u003cbr/\u003e\n\n## 🎨 Features\n\n| simple | center mode | multiple | rows |\n| :---------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: |\n| ![01 simple](https://user-images.githubusercontent.com/1215767/70865165-bbd75780-1f9d-11ea-8e2d-fc50bf2f322a.png) | ![02 center mode](https://user-images.githubusercontent.com/1215767/70865168-bf6ade80-1f9d-11ea-8d5a-7dd2bf8ba695.png) | ![03 multiple](https://user-images.githubusercontent.com/1215767/70865170-c396fc00-1f9d-11ea-894f-7b38a30d9932.png) | ![04 multiple rows](https://user-images.githubusercontent.com/1215767/70865171-c42f9280-1f9d-11ea-9b98-182d65560694.png) |\n\n| variable width | vertical | lazy load | synced sliders |\n| :-----------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: |\n| ![05 variable width](https://user-images.githubusercontent.com/1215767/70865172-c42f9280-1f9d-11ea-91dc-566ef181759a.png) | ![06 vertical mode](https://user-images.githubusercontent.com/1215767/70865173-c42f9280-1f9d-11ea-93a2-d467cf409fe5.png) | ![07 lazy loading](https://user-images.githubusercontent.com/1215767/70865174-c4c82900-1f9d-11ea-96f7-0a11cc7e1d98.png) | ![08 synced sliders](https://user-images.githubusercontent.com/1215767/70865175-c4c82900-1f9d-11ea-8731-05235efa0d10.png) |\n\nvue-slick-carousel inherits the long-loved slick-carousel features, offers a variety of functions. It has been completely rewritten as a vue component. If you were trying to use the slick-carousel in the vue, it would be a perfect choice. You can use it in a vue component manner without any disparity. It also makes it easy to solve difficult problems such as custom arrows/dots.\n\nFind out all available features on [setting props](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#props) and see how that works on [examples](https://gs-shop.github.io/vue-slick-carousel/#/example/).\n\n\u003cbr/\u003e\n\n## True SSR\n\n| [no-ssr-slick](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-no-ssr-slick-example) | [vue-slick-carousel](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example) |\n| :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: |\n| ![image](https://user-images.githubusercontent.com/1215767/71011941-a3984180-2131-11ea-8fb5-bbcdaf5740c7.png) | ![image](https://user-images.githubusercontent.com/1215767/71011993-b3b02100-2131-11ea-9295-4aca745f0706.png) |\n| FCP: 1920ms \u0026 LCP: 3090ms | FCP: 620ms \u0026 LCP: 1850ms |\n\nIt is designed to support SSR from the start. vue-slick-carousel supports true SSR. No more `no-ssr` or `client-only` to make it work anyway. If you value website performance, you are in the right place.\n\nHere're nuxt examples for you to test yourself:\n[no-ssr-slick](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-no-ssr-slick-example) vs [vue-slick-carousel](https://codesandbox.io/s/github/kyuwoo-choi/nuxt-vue-slick-carousel-example)\n\n[Find out how fast it is compared to the Top 5 carousels.](https://dev.to/gsshop/vue-js-carousels-ssr-support-and-performance-24nh) And leave what you think.\n\n\u003cbr/\u003e\n\n## 🚚 Installation\n\n### yarn/npm/bit\n\n```bash\n# npm\nnpm i vue-slick-carousel\n# yarn\nyarn add vue-slick-carousel\n# bit\nbit import gsshop.vue-slick-carousel/vue-slick-carousel\n```\n\n### cdn\n\n```bash\n# latest\nhttps://unpkg.com/vue-slick-carousel\n```\n\n\u003cbr/\u003e\n\n## πŸš€ Quick Start\n\nSee [API](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md) \u0026 [Examples](https://gs-shop.github.io/vue-slick-carousel/#/example/) to learn advanced usage.\n\n```html\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cVueSlickCarousel :arrows=\"true\" :dots=\"true\"\u003e\n \u003cdiv\u003e1\u003c/div\u003e\n \u003cdiv\u003e2\u003c/div\u003e\n \u003cdiv\u003e3\u003c/div\u003e\n \u003cdiv\u003e4\u003c/div\u003e\n \u003c/VueSlickCarousel\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import VueSlickCarousel from 'vue-slick-carousel'\n import 'vue-slick-carousel/dist/vue-slick-carousel.css'\n // optional style for arrows \u0026 dots\n import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'\n\n export default {\n name: 'MyComponent',\n components: { VueSlickCarousel },\n }\n\u003c/script\u003e\n```\n\n\u003cbr/\u003e\n\n## πŸ“š Docs\n\n- [examples](https://gs-shop.github.io/vue-slick-carousel/#/example/)\n- [settings props](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#props)\n- [methods](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#methods)\n- [events](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#events)\n- [slots](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#slots)\n- [contributing](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CONTRIBUTING.md)\n- [commit message convention](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)\n- [code of conduct](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CODE_OF_CONDUCT.md)\n\n\u003cbr/\u003e\n\n## πŸ”– License\n\nThis software is licensed under the [MIT](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgs-shop%2Fvue-slick-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgs-shop%2Fvue-slick-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgs-shop%2Fvue-slick-carousel/lists"}