Swiper Svelte Component（スワイパー・Svelte・コンポーネント

Framework7には、強力で最も近代的なタッチスライダーが付属しています- Swiper Sliderは、超柔軟な設定と多くの機能を備えています。

Swiperライブラリは、すでにFramework7に統合されており、別途インストールする必要はありません。完全なAPIドキュメントとより多くの例については、公式のSwiper for Svelte documentationをチェックしてください。

Examples

<Page>
  <Navbar title="Swiper" />
  <BlockTitle>Minimal Layout</BlockTitle>
  <Swiper>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
  </Swiper>

  <BlockTitle>With all controls</BlockTitle>
  <Swiper pagination navigation scrollbar>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
  </Swiper>

  <BlockTitle>With additional parameters</BlockTitle>
  <Swiper navigation speed={500} slidesPerView={3} spaceBetween={20}>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
    <SwiperSlide>Slide 6</SwiperSlide>
  </Swiper>

  <Block />
</Page>
  

<style>
  :global(.swiper-slide) {
    background: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 200px;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
</style>
<script>
  import {Page, Navbar, BlockTitle, Swiper, SwiperSlide, Block} from 'framework7-svelte';
</script>