# vue-slick-ts

> Vue/Nuxt component for slick-carousel with full Typescript

Latest version **1.1.0** (published 2023-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-slick-ts
pnpm add vue-slick-ts
yarn add vue-slick-ts
bun add vue-slick-ts
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-06-10 |
| First published | 2023-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.19.3 |
| Dependencies | 0 |
| Unpacked size | 542.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Baykov Ivan |
| Maintainers | efcolipt |
| Keywords | slick, carousel, vue, nuxt-slick, slick-ts, vue-slick, vue3-slick, vue-slider, slider, nuxt-slider, vue-plugin-carousel |

## Links

- npm: https://www.npmjs.com/package/vue-slick-ts
- Repository: https://github.com/Efcolipt/vue-slick-ts
- Homepage: https://github.com/Efcolipt/vue-slick-ts#readme
- Issues: https://github.com/Efcolipt/vue-slick-ts/issues
- npm.io page: https://npm.io/package/vue-slick-ts

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-06-10
- 1.0.0 — 2023-06-10
- 0.8.4 — 2023-06-10
- 0.8.3 — 2023-06-10
- 0.8.2 — 2023-06-10
- 0.8.1 — 2023-06-10
- 0.8.0 — 2023-06-10
- 0.7.6 — 2023-06-10
- 0.7.5 — 2023-06-10
- 0.7.4 — 2023-06-10
- 0.7.3 — 2023-06-10
- 0.7.2 — 2023-06-10
- 0.7.1 — 2023-06-10
- 0.7.0 — 2023-06-10
- 0.6.0 — 2023-06-08
- … 12 more at https://npm.io/package/vue-slick-ts/versions

## README

<h1 align="center">Vue/Nuxt slick with Typescript</h1>

<p align="center">
  <a href="https://github.com/efcolipt/vue-slick-ts">
   <img src="https://img.shields.io/npm/v/vue-slick-ts.svg?style=flat-square" alt="">
  </a>
    <a href="https://github.com/efcolipt/vue-slick-ts">
   <img src="https://packagequality.com/shield/vue-slick-ts.svg" alt="">
  </a>
    <a href="https://github.com/efcolipt/vue-slick-ts">
   <img src="https://img.shields.io/npm/dm/vue-slick-ts.svg?style=flat-square" alt="">
  </a>
    <a href="https://github.com/efcolipt/vue-slick-ts">
   <img src="https://img.shields.io/npm/l/vue-slick-ts.svg?style=flat-square" alt="">
  </a>
</p>

## Support

Package support ESM, UMD, CJS <br />
Package can install via NPM/YARN or just add script CDN <br/>

Package support only Vue >=3.2 version<br />
For legacy support see [here](https://www.npmjs.com/package/vue-slick)

## Installation

### Installation by CDN

Just add script to your project to footer in your body tag <br/>

```html
<script src="https://unpkg.com/vue-slick-ts@latest"></script>
```

### Installation by Npm/Yarn

Prerequisite

```sh
npm install -D @types/jquery
# or
yarn add -D @types/jquery
```

```sh
npm install vue-slick-ts
# or
yarn add vue-slick-ts
```

## Example Usage

```vue
<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>
```

---
_Source: https://npm.io/package/vue-slick-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._