Swiper Slider

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)

Check 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 Element

Since Framework7 v8, it is highly recommended to use Swiper Element instead, it provides much easier way to define Swiper with parameters in HTML, and Swiper custom elements are already registered in Framework7.

Examples

swiper-multiple.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Multiple Swipers</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">1 Slide Per View, 50px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">2 Slides Per View, 20px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="20" slides-per-view="2">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">3 Slides Per View, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" slides-per-view="3">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">Auto Slides Per View + Centered</div>
    <swiper-container pagination class="demo-swiper-multiple demo-swiper-multiple-auto" space-between="10"
      slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>


    <div class="block-title">Vertical, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" direction="vertical">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
    </swiper-container>

    <div class="block-title">Slow speed</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50" speed="900">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

  </div>
</div>

Improve this Doc

On this page

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