Have ideas to improve npm?Join in the discussion! »

    vue-slick-carousel

    1.0.6 • Public • Published

    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

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

    Install

    npm i vue-slick-carousel

    DownloadsWeekly Downloads

    22,837

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    2.25 MB

    Total Files

    30

    Last publish

    Collaborators

    • avatar