Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gs-shop/vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://github.com/gs-shop/vue-slick-carousel

carousel frontend javascript nuxt pwa slick slider ssr swiper vue vue-component

Last synced: about 2 months ago
JSON representation

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay

Host: GitHub
URL: https://github.com/gs-shop/vue-slick-carousel
Owner: gs-shop
License: other
Created: 2019-11-20T15:36:57.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-02-01T16:44:49.000Z (9 months ago)
Last Synced: 2024-05-15T13:56:09.555Z (6 months ago)
Topics: carousel, frontend, javascript, nuxt, pwa, slick, slider, ssr, swiper, vue, vue-component
Language: Vue
Homepage: https://gs-shop.github.io/vue-slick-carousel/
Size: 9.22 MB
Stars: 792
Watchers: 7
Forks: 185
Open Issues: 169
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md

Awesome Lists containing this project

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)















## 🎨 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

  


    

      1

      2

      3

      4

    

  


  import VueSlickCarousel from 'vue-slick-carousel'

  import 'vue-slick-carousel/dist/vue-slick-carousel.css'

  // optional style for arrows & dots

  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {

    name: 'MyComponent',

    components: { VueSlickCarousel },

  }

```




## 📚 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).