https://github.com/skybrud/sky-swiper
A versatile slot-based Vue swiper component
https://github.com/skybrud/sky-swiper
Last synced: 10 months ago
JSON representation
A versatile slot-based Vue swiper component
- Host: GitHub
- URL: https://github.com/skybrud/sky-swiper
- Owner: skybrud
- License: mit
- Created: 2017-08-22T10:29:17.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:18:23.000Z (over 3 years ago)
- Last Synced: 2025-07-29T06:57:58.798Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 402 KB
- Stars: 0
- Watchers: 9
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sky-swiper
> A versatile slot-based Vue swiper component
## Installation
```bash
npm install sky-swiper
```
or
```bash
yarn add sky-swiper
```
## Usage
Begin by importing and installing the SkySwiper Vue plugin
```js
import Vue from 'vue';
import SkySwiper from 'sky-swiper';
// If you want to use the baseline scss add the following line
import '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-swiper/src/SkySwiper.scss';
Vue.use(SkySwiper);
```
The `` component registers globally. It uses the `items` prop in conjunction with slots to allow you to render any kind of data inside the swiper.
### Basic markup
Just content:
```html
![]()
```
Content and caption:
```html
![]()
```
### Props
The component receives 4 props:
- `items`: An array (required). Functions as the data layer of the swiper. The array can contain whichever kind of items you need since the content-slot functions as a template for rendering the data as well.
- `controls`: Configure UI-elements to show inside the swiper content
```js
```
- `navigation`: Configure UI-elements to display outside the swiper content
```js
```
### Slots
The component provides these basic slots:
- `"content"` - **Required.**. Uses data from the items prop. Scoped slot with these bindings: `{ item, index }`
- `"caption"` - Uses data from the items prop. Scoped slot with these bindings: `{ item, index }`
Apart fron these there are more advanced slots for customizing the look in detail (more documentation needed):
- `"cursor"` - Custom cursor icon. Scoped slot with these bindings: `{ direction, active, pressed }`
- `"controls-next"` - Custom next icon
- `"controls-previous"` - Custom previous icon
- `"navigation-next"` - Custom next icon (in the navigation)
- `"navigation-previous"` - Custom previous icon (in the navigation)
- `"bullets"` - Custom icon of the bullets in the navigation. Scoped slot with these bindings: `{ active, index }`
## Example
This basic concept can be expanded upon by using all available slots and configuration props to completely customize the swiper.
```html
![]()
```
## Credits
This module is made by the front-end team at [Skybrud.dk](http://www.skybrud.dk/).
Feel free to use it in any way you want. Feedback, questions and bug reports should be posted as issues. Pull-requests appreciated!