# vue-ctk-carousel > A flexible, responsive, touch-friendly carousel for Vue.js Latest version **0.2.0** (published 2018-08-21) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-ctk-carousel pnpm add vue-ctk-carousel yarn add vue-ctk-carousel bun add vue-ctk-carousel ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2018-08-21 | | First published | 2018-08-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | william.da.silva@chronotruck.com | | Maintainers | williamdasilva | | Keywords | Vue, carousel, slider, responsive | ## Links - npm: https://www.npmjs.com/package/vue-ctk-carousel - Repository: https://github.com/chronotruck/vue-ctk-carousel - Homepage: https://github.com/chronotruck/vue-ctk-carousel#readme - Issues: https://github.com/chronotruck/vue-ctk-carousel/issues - npm.io page: https://npm.io/package/vue-ctk-carousel ## 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 - 0.2.0 (latest) — 2018-08-21 - 0.1.2 — 2018-08-14 - 0.1.1 — 2018-08-14 - 0.1.0 — 2018-08-14 ## README # Vue Carousel [![Latest Stable Version](https://img.shields.io/npm/v/vue-ctk-carousel.svg)](https://www.npmjs.com/package/vue-ctk-carousel) **This project is a hard fork from the [vue-carousel](https://github.com/SSENSE/vue-carousel) component by SSENSE. We decided to fork it for our own usage since the updates where not made very often.** **Feel free to submit issues and feature requests [here](https://github.com/chronotruck/vue-ctk-carousel/issues)**. [Full documentation and examples](https://ssense.github.io/vue-ctk-carousel) ## Table of Contents - [Installation](#installation) - [Usage](#usage) - [Development](#development) - [License](#license) ## Installation ``` bash npm install vue-ctk-carousel ``` or if you prefer yarn ``` bash yarn add vue-ctk-carousel ``` ## Usage ### Global You may install Vue Carousel globally: ``` js import Vue from 'vue'; import VueCarousel from 'vue-ctk-carousel'; Vue.use(VueCarousel); ``` This will make **<carousel>** and **<slide>** available to all components within your Vue app. ### Local Include the carousel directly into your component using import: ``` js import { Carousel, Slide } from 'vue-ctk-carousel'; export default { ... components: { Carousel, Slide } ... }; ``` ### Configuration | Property | Type | Default | Description | |:--------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | easing | String | ease | Slide transition easing. Any valid CSS transition easing accepted. | | minSwipeDistance | Number | 8 | Minimum distance for the swipe to trigger a slide advance. | | navigationClickTargetSize | Number | 8 | Amount of padding to apply around the label in pixels. | | mouseDrag | Boolean | true | Flag to toggle mouse dragging. | | navigationEnabled | Boolean | false | Flag to render the navigation component (next/prev buttons). | | navigationNextLabel | String | ▶ | Text content of the navigation next button. | | navigationPrevLabel | String | ◀ | Text content of the navigation prev button. | | paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. | | paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. | | paginationEnabled | Boolean | true | Flag to render pagination component. | | paginationPadding | Number | 10 | The padding inside each pagination dot. Pixel values are accepted. | | paginationSize | Number | 10 | The size of each pagination dot. Pixel values are accepted. | | perPage | Number | 2 | Maximum number of slides displayed on each page. | | perPageFixed | Boolean | false | Specify if the slides should have a fixed width according to the page number. | | perPageCustom | Array | | Configure the number of visible slides with a particular browser width. This will be an array of arrays, ex. [[320, 2], [1199, 4]]. Formatted as [x, y] where x=browser width, and y=number of slides displayed. Ex. [1199, 4] means if (window <= 1199) then show 4 slides per page. | | resistanceCoef | Number | 20 | Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries. | | scrollPerPage | Boolean | true | Scroll per page, not per item. | | speed | Number | | Slide transition speed. Number of milliseconds accepted. | | loop | Boolean | false | Flag to make the carousel loop around when it reaches the end. | | navigateTo | Number | 0 | Listen for an external navigation request using this prop. | | spacePadding | Number | 0 | Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner. | | initialSpacePadding | Number | 0 | Initial space padding added to the left side, if the padding factor align the slides to the left. Cannot be bigger than `spacePadding`. | | spacePaddingFactor | Number | 0 | Add a padding factor to manage how the last item is rendered on the carousel. Common values are: (`0`: the last item is aligned to the center, like the first item; `1`: the last item is aligned to the right of the carousel, `2`: the last item is overflowed by it's container (previous behaviour)) | ### Events | Event | Type | Emitter | Description | |:--------------------------|:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | slideClick | Object | Slide | "slideClick" event throws the *dataset* object of the selected element | ### HTML Structure Once the **Carousel** and **Slide** components are installed globally or imported, they can be used in templates in the following manner: ``` html Slide 1 Content Slide 2 Content ``` To listen for the 'slideClick' event you can do the following: ```html Slide 1 Content ... ``` ```js handleSlideClick (dataset) => { console.log(dataset.index, dataset.name) } ``` ## Development A sandboxed dev environment is provided by [vue-play](https://github.com/vue-play/vue-play). Changes made to the component files will appear in real time in the sandbox. To begin development, run: ``` bash npm install npm run dev ``` or, if you prefer yarn ``` bash yarn install yarn dev ``` then navigate to `http://localhost:5000` To modify and add sandbox scenarios, edit `play/index.js` ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. --- _Source: https://npm.io/package/vue-ctk-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._