Swiper Slider

Swiper Slider HTML Layout
Swiper App Methods
Swiper API (Parameters, Methods And Properties)
Swiper Auto Initialization
Examples

Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.

Swiper Slider HTML Layout

Swiper HTML layout is pretty simple:

<!-- Slider container -->
<div class="swiper">
    <!-- Slides wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

Where:

swiper - main slider container with slides and paginations. Required element
- swiper-wrapper - additional wrapper for slides. Required element
  - swiper-slide - single slide element. Could contain any HTML inside
- swiper-pagination - container with pagination bullets. Note, that pagination bullets will be created automatically. Optional element

Swiper App Methods

Now, when we have Swiper' HTML, we need to initialize it. We need to use related App's method:

app.swiper.create(swiperEl, parameters)- initialize slider with options

swiperEl - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
parameters - object - object with Swiper parameters. Optional.
Method returns initialized Swiper instance

app.swiper.destroy(swiperEl)- destroy Swiper instance

swiperEl - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.

app.swiper.get(swiperEl)- get Swiper instance by HTML element

swiperEl - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.

For example:

var swiper = app.swiper.create('.swiper', {
    speed: 400,
    spaceBetween: 100
});

Swiper API (Parameters, Methods And Properties)

Сheck out Swiper API Website for the most relevant API parameters and methods.

Framework7's version of Swiper doesn't contain History and Hash Navigation modules

Swiper Auto Initialization

If you don't need to use Swiper API and your Swiper is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional swiper-init class:

<!-- swiper-init to initialize swiper automatically -->
<div class="swiper swiper-init">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

In this case if you need to access created Swiper instance you can use the app.swiper.get app method:

var swiper = app.swiper.get('.swiper');

swiper.slideNext();

But what about Swiper parameters. In this case we need to pass them in data- attributes.

Parameters that used in camelCase, for example slidesPerView, in data- attributes should be used as kebab-case as data-slides-per-view

<!-- swiper properties in data- attributes -->
<div class="swiper swiper-init" data-speed="400" data-space-between="40">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

Or we can pass all Swiper parameters in valid JSON format in data-swiper attribute:

<!-- swiper properties in JSON format in data-swiper attribute -->
<div class="swiper swiper-init" data-swiper='{"speed":"400", "spaceBetween":"40"}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Swiper</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Default</div>
      <div class="swiper swiper-init demo-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>

      <div class="block-title">1 Slide Per View, 50px Between</div>
      <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50"
        class="swiper swiper-init demo-swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">2 Slides Per View, 20px Between</div>
      <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="20" data-slides-per-view="2"
        class="swiper swiper-init demo-swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">3 Slides Per View, 10px Between</div>
      <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="3"
        class="swiper swiper-init demo-swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">Auto Slides Per View + Centered</div>
      <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="auto"
        data-centered-slides="true" class="swiper swiper-init demo-swiper demo-swiper-auto">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
      <div class="block-title">Vertical, 10px Between</div>
      <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-direction="vertical"
        class="swiper swiper-init demo-swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
      </div>
      <div class="block-title">Slow speed</div>
      <div data-speed="900" data-pagination='{"el": ".swiper-pagination"}' data-space-between="50"
        class="swiper swiper-init demo-swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .demo-swiper .swiper-slide {
    font-size: 25px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
  }

  .demo-swiper .swiper-slide {
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
  }

  .demo-swiper {
    margin: 0px 0 35px;
    font-size: 18px;
    height: 120px;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide {
    width: 85%;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
    width: 70%;
  }

  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
    width: 30%;
  }
</style>