Vue/Nuxt slick with Typescript
Support
Package support ESM, UMD, CJS
Package can install via NPM/YARN or just add script CDN
Package support only Vue >=3.2 version
For legacy support see here
Installation
Installation by CDN
Just add script to your project to footer in your body tag
<script src="https://unpkg.com/vue-slick-ts@latest"></script>Installation by Npm/Yarn
Prerequisite
npm install -D @types/jquery
# or
yarn add -D @types/jquerynpm install vue-slick-ts
# or
yarn add vue-slick-tsExample Usage
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ListSlickMethods, VueSlickCarousel } from "vue-slick-ts";
import type { SlickInstance } from "vue-slick-ts";
import "vue-slick-ts/dist/css/slick.css";
const carousel = ref<SlickInstance | null>(null);
const handleInit = (e: JQuery.Event, instance: SlickInstance) => {
console.log(e, instance);
};
onMounted(() => {
carousel.value!(ListSlickMethods.SLICK_METHODS_PLAY);
});
</script>
<template>
<VueSlickCarousel ref="carousel" @init="handleInit" :autoplay-speed="4000">
<div>Test 1</div>
<div>Test 2</div>
</VueSlickCarousel>
</template>