🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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