Registry / ui / v-slick-carousel

v-slick-carousel

library0.7.1jsnpmunverified

V Slick Carousel is a Vue 3 carousel component with TypeScript support, providing features like multiple slides per group, responsiveness, lazy loading, vertical mode, auto play, pagination, keyboard accessibility, RTL support, and SSR. It is a Vue 3-only library (no Vue 2 support) with a stable version of 0.7.1. The library ships TypeScript types and is designed for modern Vue 3 projects using the Composition API. It differentiates from other carousels by offering a rich feature set combined with full TypeScript integration.

npm install v-slick-carousel

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · V-SLICK-CAROUSEL

v-slick-carousel

uijavascriptv0.7.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

VSlickCarousel

✓ import { VSlickCarousel } from 'v-slick-carousel'

✗ import VSlickCarousel from 'v-slick-carousel'

Must use named import; default import is not exported.

Settings

✓ import type { Settings } from 'v-slick-carousel'

✗ import { Settings } from 'v-slick-carousel'

Settings is a TypeScript type, so use import type to avoid runtime errors.

style.css

✓ import 'v-slick-carousel/style.css'

✗ import 'v-slick-carousel/dist/style.css'

No dist path needed; CSS is at the package root.

Shows a basic Vue 3 SFC using V Slick Carousel with TypeScript, importing the component, types, and CSS.

<template> <div class="carousel"> <VSlickCarousel v-bind="{ slidesToShow: 2, autoplay: true, autoplaySpeed: 2000, arrows: true }"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> </VSlickCarousel> </div> </template> <script setup lang="ts"> import 'v-slick-carousel/style.css' import { VSlickCarousel } from 'v-slick-carousel' import type { Settings } from 'v-slick-carousel' const settings: Settings = { slidesToShow: 2, autoplay: true, autoplaySpeed: 2000, arrows: true } </script> <style scoped> .carousel { padding: 28px; } </style>

Debug

Known issues

gotchaComponent only works with Vue 3. Using Vue 2 will cause errors.

fix

Upgrade your project to Vue 3 or use a different carousel library for Vue 2.

affects: >=0.0.0

breakingImport path for CSS changed in v0.6.0: previously required 'v-slick-carousel/dist/style.css'. Now requires 'v-slick-carousel/style.css'.

fix

Update import to 'v-slick-carousel/style.css'.

affects: >=0.6.0

deprecatedThe 'settings' prop as an object is deprecated; use v-bind with individual props instead.

fix

Use v-bind="settings" or bind each prop individually.

affects: >=0.7.0

gotchaTypeScript type Settings must be imported using `import type` to avoid emitting unnecessary runtime code.

fix

Use `import type { Settings } from 'v-slick-carousel'`.

affects: >=0.0.0

breakingDefault import of VSlickCarousel is removed in v0.5.0; must use named import.

fix

Change to `import { VSlickCarousel } from 'v-slick-carousel'`.

affects: >=0.5.0

Errors

Common errors & fixes

'VSlickCarousel' is not defined

Using default import instead of named import.

fix

Ensure you use `import { VSlickCarousel } from 'v-slick-carousel'`.

Cannot find module 'v-slick-carousel/dist/style.css' or its corresponding type declarations.

CSS import path changed in v0.6.0.

fix

Update import to `import 'v-slick-carousel/style.css'`.

TypeError: Cannot read properties of undefined (reading 'component')

Using Vue 2 with this library.

fix

Upgrade to Vue 3 or choose a Vue 2 compatible carousel.

Upgrade

Version history

0.7.1latest on npm

Audit

Dependencies

vuerequiredpeer dependency required for the component to work

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ctfdavis/v-slick-carousel ↗

packagev-slick-carousel ↗

homepagehttps://github.com/ctfdavis/v-slick-carousel#readme ↗