v4
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop

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-container">
    <!-- 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-container - 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-container', {
    speed: 400,
    spaceBetween: 100
});

Swiper API (Parameters, Methods And Properties)

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

Note that Framework7's version of Swiper doesn't contain Keyboard, History, Hash Navigation and Mousewheel modules as they are desktop only things

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-container 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-container');

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-container 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-container 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

/* A bit of demo styles */
.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%;
}

Default

<div class="swiper-container 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>

1 Slide Per View, 50px Between

<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container 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>

2 Slides Per View, 20px Between

<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="20" data-slides-per-view="2" class="swiper-container 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>

3 Slides Per View, 10px Between

<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="3" class="swiper-container 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>

Auto Slides Per View + Centered

<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="auto" data-centered-slides="true" class="swiper-container 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>

Vertical, 10px Between

<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-direction="vertical" class="swiper-container 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>

Slow speed

<div data-speed="900" data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container 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>