# vue-slick-carousel > Vue Slick Carousel with True SSR Written for Faster Luxstay Latest version **1.0.6** (published 2020-07-05) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-slick-carousel pnpm add vue-slick-carousel yarn add vue-slick-carousel bun add vue-slick-carousel ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.6 | | Published | 2020-07-05 | | First published | 2019-11-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 2.1 MB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 826 | | Author | KyuWoo Choi | | Maintainers | kyuwoo.choi | | Keywords | vue, slick, carousel, slider, ssr, pwa, nuxt | ## Links - npm: https://www.npmjs.com/package/vue-slick-carousel - Repository: https://github.com/gs-shop/vue-slick-carousel - Homepage: https://gs-shop.github.io/vue-slick-carousel/ - Issues: https://github.com/gs-shop/vue-slick-carousel/issues - npm.io page: https://npm.io/package/vue-slick-carousel ## Dependencies (8) - [vue](https://npm.io/package/vue.md) ^2.6.10 - [json2mq](https://npm.io/package/json2mq.md) 0.2.0 - [enquire.js](https://npm.io/package/enquire.js.md) 2.1.6 - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [lodash.pick](https://npm.io/package/lodash.pick.md) ^4.4.0 - [lodash.assign](https://npm.io/package/lodash.assign.md) ^4.2.0 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8 - [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) 1.5.1 ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.0.6 (latest) — 2020-07-05 - 1.0.5 — 2020-03-30 - 1.0.4 — 2020-03-26 - 1.0.3 — 2020-03-24 - 1.0.2 — 2020-02-12 - 1.0.1 — 2020-02-06 - 1.0.0 — 2019-12-28 - 1.0.0-beta.4 — 2019-12-26 - 1.0.0-beta.3 — 2019-12-16 - 1.0.0-beta.2 — 2019-12-16 - 1.0.0-beta.1 — 2019-12-15 - 1.0.0-beta.0 — 2019-12-04 - 1.0.0-alpha.5 — 2019-12-01 - 1.0.0-alpha.3 — 2019-11-27 ## README # vue-slick-carousel > 🚥 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). [![npm version](https://img.shields.io/npm/v/vue-slick-carousel.svg)](https://www.npmjs.com/package/vue-slick-carousel) [![bit](https://img.shields.io/bit/collection/total-components/gsshop/vue-slick-carousel)](https://bit.dev/gsshop/vue-slick-carousel/vue-slick-carousel) [![license](https://img.shields.io/npm/l/vue-slick-carousel)](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/gs-shop/vue-slick-carousel/issues?&q=is%3Aissue+is%3Aopen) [![code with hearth by GSShop](https://img.shields.io/badge/gsshop-%3C%2F%3E%20-cadb2a.svg)](https://github.com/gs-shop) [![hearth for Luxstay](https://img.shields.io/badge/luxstay-%20%E2%99%A5%20-ff3333.svg)](https://www.luxstay.com) [![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) Gitmoji

## 🎨 Features | simple | center mode | multiple | rows | | :---------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | | ![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) | | variable width | vertical | lazy load | synced sliders | | :-----------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: | | ![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) | vue-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. Find 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/).
## True SSR | [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) | | :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | | ![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) | | FCP: 1920ms & LCP: 3090ms | FCP: 620ms & LCP: 1850ms | It 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. Here're nuxt examples for you to test yourself: [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) [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.
## 🚚 Installation ### yarn/npm/bit ```bash # npm npm i vue-slick-carousel # yarn yarn add vue-slick-carousel # bit bit import gsshop.vue-slick-carousel/vue-slick-carousel ``` ### cdn ```bash # latest https://unpkg.com/vue-slick-carousel ```
## 🚀 Quick Start See [API](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md) & [Examples](https://gs-shop.github.io/vue-slick-carousel/#/example/) to learn advanced usage. ```html ```
## 📚 Docs - [examples](https://gs-shop.github.io/vue-slick-carousel/#/example/) - [settings props](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#props) - [methods](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#methods) - [events](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#events) - [slots](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#slots) - [contributing](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CONTRIBUTING.md) - [commit message convention](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md) - [code of conduct](https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/CODE_OF_CONDUCT.md)
## 🔖 License This software is licensed under the [MIT](https://github.com/gs-shop/vue-slick-carousel/blob/master/LICENSE). --- _Source: https://npm.io/package/vue-slick-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._