vue-slick-carousel

Vue Slick Carousel with True SSR Written for Faster Luxstay

vue-slick-carousel downloads vue-slick-carousel version vue-slick-carousel license

vue-slick-carouselSimilar Packages:

Npm Package Weekly Downloads Trend

3 Years
🌟 Show real-time usage chart on vue-slick-carousel's README.md, just copy the code below.
## Usage Trend
[![Usage Trend of vue-slick-carousel](https://npm-compare.com/img/npm-trend/THREE_YEARS/vue-slick-carousel.png)](https://npm-compare.com/vue-slick-carousel#timeRange=THREE_YEARS)

Cumulative GitHub Star Trend

🌟 Show GitHub stars trend chart on vue-slick-carousel's README.md, just copy the code below.
## GitHub Stars Trend
[![GitHub Stars Trend of vue-slick-carousel](https://npm-compare.com/img/github-trend/vue-slick-carousel.png)](https://npm-compare.com/vue-slick-carousel)

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
vue-slick-carousel0825-1706 years agoMIT

README for vue-slick-carousel

vue-slick-carousel

πŸš₯ Vue Slick Carousel with True SSR Written for Faster Luxstay. This Is a Port of react-slick.

npm version bit license PRs welcome code with hearth by GSShop hearth for Luxstay semantic-release Gitmoji


🎨 Features

simplecenter modemultiplerows
01 simple02 center mode03 multiple04 multiple rows
variable widthverticallazy loadsynced sliders
05 variable width06 vertical mode07 lazy loading08 synced sliders

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 and see how that works on examples.


True SSR

no-ssr-slickvue-slick-carousel
imageimage
FCP: 1920ms & LCP: 3090msFCP: 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 vs vue-slick-carousel

Find out how fast it is compared to the Top 5 carousels. And leave what you think.


🚚 Installation

yarn/npm/bit

# npm
npm i vue-slick-carousel
# yarn
yarn add vue-slick-carousel
# bit
bit import gsshop.vue-slick-carousel/vue-slick-carousel

cdn

# latest
https://unpkg.com/vue-slick-carousel

πŸš€ Quick Start

See API & Examples to learn advanced usage.

<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </VueSlickCarousel>
  </div>
</template>

<script>
  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 },
  }
</script>

πŸ“š Docs


πŸ”– License

This software is licensed under the MIT.