Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/staskjs/vue-slick
Vue component for Slick-carousel (http://kenwheeler.github.io/slick)
https://github.com/staskjs/vue-slick
Last synced: 13 days ago
JSON representation
Vue component for Slick-carousel (http://kenwheeler.github.io/slick)
- Host: GitHub
- URL: https://github.com/staskjs/vue-slick
- Owner: staskjs
- Created: 2016-10-27T13:22:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T15:30:20.000Z (over 1 year ago)
- Last Synced: 2025-01-11T08:08:52.084Z (15 days ago)
- Language: Vue
- Size: 316 KB
- Stars: 616
- Watchers: 17
- Forks: 110
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-slick - slick?style=social) - 实现流畅轮播框的vue组件 (UI组件)
- awesome-github-vue - vue-slick - 实现流畅轮播框的vue组件 (UI组件)
- awesome-github-vue - vue-slick - 实现流畅轮播框的vue组件 (UI组件)
- awesome - vue-slick - 实现流畅轮播框的vue组件 (UI组件)
README
# Slick for Vue.js
# ATTENTION!
This package is no longer supported by its main contributor ([@staskjs](https://github.com/staskjs)). If you would like to work on it, I will gladly add you as a collaborator. Please reach me on telegram @staskjs.
## Vue support
Supports only Vue >= 2
For support Vue / Nuxt 3 see [here](https://github.com/Efcolipt/vue-slick-ts)
## Installation and usage
See official documentation [here](http://kenwheeler.github.io/slick).
```sh
npm install vue-slick
# or
yarn add vue-slick
```
***NOTE***: `slick-carousel` official package appears to use `jquery` as a dependency in package.json,
despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple
versions of jquery. Be aware of that. When using `webpack` you can solve this problem with aliases.
```javascript
import Slick from 'vue-slick';
new Vue({
components: { Slick },
data() {
return {
slickOptions: {
slidesToShow: 3,
// Any other options that can be got from plugin documentation
},
};
},
// All slick methods can be used too, example here
methods: {
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
},
reInit() {
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
},
// Events listeners
handleAfterChange(event, slick, currentSlide) {
console.log('handleAfterChange', event, slick, currentSlide);
},
handleBeforeChange(event, slick, currentSlide, nextSlide) {
console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
},
handleBreakpoint(event, slick, breakpoint) {
console.log('handleBreakpoint', event, slick, breakpoint);
},
handleDestroy(event, slick) {
console.log('handleDestroy', event, slick);
},
handleEdge(event, slick, direction) {
console.log('handleEdge', event, slick, direction);
},
handleInit(event, slick) {
console.log('handleInit', event, slick);
},
handleReInit(event, slick) {
console.log('handleReInit', event, slick);
},
handleSetPosition(event, slick) {
console.log('handleSetPosition', event, slick);
},
handleSwipe(event, slick, direction) {
console.log('handleSwipe', event, slick, direction);
},
handleLazyLoaded(event, slick, image, imageSource) {
console.log('handleLazyLoaded', event, slick, image, imageSource);
},
handleLazyLoadError(event, slick, image, imageSource) {
console.log('handleLazeLoadError', event, slick, image, imageSource);
},
},
});
```
```html
```
If you need, you can import slick styles too:
```js
// MyCarrousel.vue
import 'slick-carousel/slick/slick.css';
```