Popularity
1.1
Growing
Activity
8.9
Stable
108
3
11

Description

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 click-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.

It is designed to support SSR from the start. So far, we have confirmed that the vue-slick-carousel is the only carousel that supports SSR with rich features. If you value website performance, you are in the right place.

Find out all available features on setting props and see how that works on examples.

Monthly Downloads: 0
Programming language: JavaScript
Tags: Sliders     Slider     Carousel     slick     vue     SSR     PWA     Nuxt    
Latest version: v1.0.2

vue-slick-carousel alternatives and similar libraries

Based on the "Sliders" category

Do you think we are missing an alternative of vue-slick-carousel or a related project?

Add another 'Sliders' Library

README

🚥 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

🎨 Features

simple center mode multiple rows
01 simple 02 center mode 03 multiple 04 multiple rows
variable width vertical lazy load synced sliders
05 variable width 06 vertical mode 07 lazy loading 08 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-slick vue-slick-carousel
image image
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 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'
  // 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.


*Note that all licence references and agreements mentioned in the vue-slick-carousel README section above are relevant to that project's source code only.