[swiper.js](https://swiperjs.com/) component for Svelte.
# Example
- [Demos](https://beomy.github.io/svelte-swiper)
# Install
This library support Svelte >= 3.0. And use swiper.js > 6.x.
```
npm install svelte-swiper
or
yarn add svelte-swiper
```
# rollup config
When this library use in rollup, you need some config:
```
npm install rollup-plugin-css-only
or
yarn add rollup-plugin-css-only
```
```js
// rollup.config.js
import css from 'rollup-plugin-css-only'
export default {
// ...
plugins: [
// ...
commonjs({
namedExports: {
'svelte-swiper': ['Swiper', 'SwiperSlide']
}
}),
// ...
css({ output: 'public/build/swiper-bundle.css' }),
// ...
]
// ...
}
```
```html
```
# Usage
This library need to use `swiper.css`.
`import 'swiper/swiper-bundle.css'` add in `main.js`:
```js
// main.js
import App from './App.svelte';
import 'swiper/swiper-bundle.css'
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
```
## Use Component
`svelte-swiper` has two component, `Swiper` and `SwiperSlide`.
```html
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
```
## Use Class, Style
You can use `className` and `style`. `className` is css class
```html
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
```
## Component API
`svelte-swiper` support `swiper.js` events. ([https://swiperjs.com/api/#events](https://swiperjs.com/api/#events))
```html
```
## Swiper instance
swiper instance use for slider methods. ([https://swiperjs.com/api/#methods](https://swiperjs.com/api/#methods)). also `svelte-swiper` can use swiper instance.
```html
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
```
# License
MIT
# Author
[Hyo Bum Lee](https://beomy.github.io/)
# Known issues
- [https://github.com/sveltejs/svelte/issues/3964](https://github.com/sveltejs/svelte/issues/3964)