svelte-swiper

v1.0.1

Published

2 years ago

swiper.js for svelte

Downloads

1,802

0High
0Medium
0Low

beomy

svelte swiperjs

swiper.js component for Svelte.

Example

Demos

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

// 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' }),
    // ...
  ]
  // ...
}

<!-- public/index.html -->
<!doctype html>
<html>
<head>
  <!-- ... -->
  <link rel='stylesheet' href='/build/swiper-bundle.css'>
</head>
  <!-- ... -->
</html>

Usage

This library need to use swiper.css.

import 'swiper/swiper-bundle.css' add in main.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.

<script>
  import { Swiper, SwiperSlide } from 'svelte-swiper';
  
  const options = {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
</script>

<Swiper {options}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
  <SwiperSlide>Slide 10</SwiperSlide>

  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
</Swiper>

Use Class, Style

You can use className and style. className is css class

<Swiper className="cssSwiperClass" style="background-color:black;" {options}>
  <SwiperSlide className="cssSlideClass" style="background-color:red;">Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
  <SwiperSlide>Slide 10</SwiperSlide>
</Swiper>

Component API

svelte-swiper support swiper.js events. (https://swiperjs.com/api/#events)

<Swiper
  on:slideChangeTransitionStart="{() => {}}"
  on:slideChangeTransitionEnd="{() => {}}"
  ...
/>

Swiper instance

swiper instance use for slider methods. (https://swiperjs.com/api/#methods). also svelte-swiper can use swiper instance.

<script>
  import { Swiper, SwiperSlide } from 'svelte-swiper';
  let mySwiper;

  function slideTo () {
    mySwiper.slideTo(5);
  }
</script>

<button on:click={slideTo}>slideTo</button>

<Swiper bind:swiper={mySwiper}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
  <SwiperSlide>Slide 10</SwiperSlide>
</Swiper>

License

MIT

Author

Hyo Bum Lee

Known issues

https://github.com/sveltejs/svelte/issues/3964