Registry / web-framework / vue-slick-carousel

vue-slick-carousel

library1.0.6jsnpmunverified

Vue Slick Carousel is a Vue.js component that provides fully-featured carousel and slider functionality, serving as a Vue port of the popular `react-slick` library. It was specifically developed with a focus on robust Server-Side Rendering (SSR) support, making it suitable for applications built with frameworks like Nuxt.js, and was initially designed for the Luxstay platform. The current stable version is 1.0.6, released in July 2020. The project has not seen any significant updates since this time, indicating it is no longer actively maintained. Its primary differentiators were its strong SSR capabilities and its direct adaptation of the `react-slick` API and features within the Vue ecosystem, aiming to offer a seamless experience for developers familiar with Slick Carousel.

web-framework

npm install vue-slick-carousel

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SLICK-CAROUSEL

vue-slick-carousel

web-frameworkjavascriptv1.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueSlickCarousel

✓ import VueSlickCarousel from 'vue-slick-carousel'

✗ const VueSlickCarousel = require('vue-slick-carousel')

This is the primary named export for the component. CommonJS `require` syntax is incorrect in modern Vue CLI/Vite projects.

Carousel base CSS

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

Required for the carousel's fundamental styling. Without it, the carousel will likely appear unstyled or broken.

Carousel theme CSS

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

Optional import for the default theme styling, including arrows and dots.

This quickstart demonstrates how to import, register, and use the `VueSlickCarousel` component in a Vue 2 application with responsive settings and basic styling.

import Vue from 'vue'; import VueSlickCarousel from 'vue-slick-carousel'; import 'vue-slick-carousel/dist/vue-slick-carousel.css'; import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'; new Vue({ el: '#app', components: { VueSlickCarousel }, template: ` <div id="app"> <h1>My Featured Products</h1> <VueSlickCarousel v-bind="settings"> <div><img src="https://via.placeholder.com/300x200?text=Product+1" alt="Product 1"><h3>Item 1</h3></div> <div><img src="https://via.placeholder.com/300x200?text=Product+2" alt="Product 2"><h3>Item 2</h3></div> <div><img src="https://via.placeholder.com/300x200?text=Product+3" alt="Product 3"><h3>Item 3</h3></div> <div><img src="https://via.placeholder.com/300x200?text=Product+4" alt="Product 4"><h3>Item 4</h3></div> <div><img src="https://via.placeholder.com/300x200?text=Product+5" alt="Product 5"><h3>Item 5</h3></div> </VueSlickCarousel> </div> `, data() { return { settings: { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] } }; } });

Debug

Known issues

breakingVersion 1.0.1 introduced a breaking change impacting the alignment logic when the number of slides is less than `slidesToShow`, specifically affecting 'center' or 'left' alignment modes.

fix

Review the carousel's `centerMode` and `variableWidth` settings and adjust CSS or configuration if 'center' or 'left' alignment behaves unexpectedly with fewer slides.

affects: >=1.0.1

securityVersion 1.0.6 included a security fix (commit `d23a941`). Prior versions of `vue-slick-carousel` might contain undisclosed vulnerabilities. Users are strongly advised to upgrade to 1.0.6 or newer.

fix

Upgrade to `vue-slick-carousel@1.0.6` or a newer version to incorporate the security patches.

affects: <1.0.6

abandonedThe `vue-slick-carousel` project has not received any updates since July 2020. This indicates the project is abandoned and will not receive new features, bug fixes, or security patches. Use with caution in new projects or long-term production environments.

fix

For new projects, consider actively maintained Vue 3 carousel libraries. For existing projects, evaluate the risk of using unmaintained software, consider internal forks, or migrate to an alternative.

affects: >=1.0.6

gotchaThe underlying `slick-carousel` library (a dependency) relies on jQuery. This can lead to increased bundle size and potential conflicts if your project uses a different version of jQuery or manages dependencies differently.

fix

If encountering issues, ensure jQuery is correctly bundled and accessible. For Webpack users, aliases can help manage jQuery versions. Consider alternatives if jQuery dependency is problematic.

affects: >=1.0.0

gotcha`ResizeObserver is not defined` errors can occur, particularly in SSR environments or older browser targets without polyfills. This was a known bug fixed in version 1.0.2.

fix

Upgrade to `vue-slick-carousel@1.0.2` or newer. For older versions or specific environments, ensure `ResizeObserver` is polyfilled if needed during SSR.

affects: <1.0.2

Errors

Common errors & fixes

TypeError: $(...).slick is not a function

The underlying jQuery Slick Carousel plugin or jQuery itself has not been correctly loaded or initialized, or the component is trying to access Slick methods before it's ready.

fix

Ensure `slick-carousel` and its dependency `jquery` are properly installed and imported. Verify that the component's parent lifecycle (e.g., `mounted` hook) correctly renders the carousel before attempting to call its methods. For modular builds, ensure jQuery is globally exposed if `slick-carousel` expects it.

Carousel displays unstyled, slides are stacked vertically, or arrows/dots are missing.

The necessary CSS files for `vue-slick-carousel` or its theme have not been imported.

fix

Add the required CSS imports: `import 'vue-slick-carousel/dist/vue-slick-carousel.css'` and `import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'` to your main entry file or component.

[Vue warn]: Failed to resolve component: VueSlickCarousel

The `VueSlickCarousel` component has not been correctly registered with Vue, either globally or locally within the consuming component.

fix

Ensure you `import VueSlickCarousel from 'vue-slick-carousel'` and then register it in your Vue component's `components` option: `{ components: { VueSlickCarousel } }`, or globally via `Vue.component('VueSlickCarousel', VueSlickCarousel)`.

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

slick-carouselrequiredCore jQuery-based carousel library that this Vue component wraps.

vuerequiredUnderlying framework for the component library.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/gs-shop/vue-slick-carousel ↗

packagehttps://www.npmjs.com/package/vue-slick-carousel ↗

homepagehttps://vue-slick-carousel.js.org ↗