Swiper Slider

优质

小牛编辑

137浏览

2023-12-01

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

Initialize Swiper with JavaScript

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

myApp.swiper(swiperContainer, parameters) - initialize slider with options

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

new Swiper(swiperContainer, parameters) - initialize slider with options

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

For example:

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

Note that Swiper container should be in DOM on a moment of initialization. So if you use slider not on home page, you need to initialize it within pageInit event

Swiper API (Parameters, Methods And Properties)

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

Initialize Swiper with HTML

If you don't need Swiper callback you can initialize swiper using HTML without JavaScript. You can do that just by adding additional "swiper-init" class to swiper-container

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

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 hypens-case as data-slides-per-view

<!-- swiper properties in data- attributes -->
<div class="swiper-container swiper-init" data-speed="400" data-space-between="40" data-pagination=".swiper-pagination">
    <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 class="swiper-pagination"></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', 'pagination': '.swiper-pagination'}">
    <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 class="swiper-pagination"></div>
</div>

Access to Swiper's Instance

If you initialize Swiper using HTML it is still possible to access to Swiper's instance. It is "swiper" property of slider's container HTML element:

var mySwiper = $$('.swiper-container')[0].swiper;
 
// Now you can use all slider methods like
mySwiper.slideNext();

Examples

Default Swiper with pagination

/* A bit of demo styles */;
.swiper-container {
  height: 100%;
}
.swiper-slide {
  background:#fff;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin:20px;
  font-size:21px;
}

...
<div class="page-content">
  <!-- Slider -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      <div class="swiper-slide"><span>Slide 3</span></div>
      <div class="swiper-slide"><span>Slide 4</span></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>
...

  var myApp = new Framework7(); 
 
  // Init slider and store its instance in mySwiper variable
  var mySwiper = myApp.swiper('.swiper-container', {
    pagination:'.swiper-pagination'
  });

Vertical Swiper

Styles and HTML layout are the same as in previous example

  var myApp = new Framework7(); 
 
  // Init slider and store its instance in mySwiper variable
  var mySwiper = myApp.swiper('.swiper-container', {
    pagination:'.swiper-pagination',
    direction: 'vertical'
  });

With space between slides

Styles and HTML layout are the same as in previous examples

  var myApp = new Framework7(); 
 
  // Init slider and store its instance in mySwiper variable
  var mySwiper = myApp.swiper('.swiper-container', {
    pagination:'.swiper-pagination',
    spaceBetween: 100 // 100px between slides
  });

Multiple Swipers

.swiper-slide {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin: 20px;
  font-size:21px;
}
.swiper-container {
  height: 120px;
  margin: 35px 0;
}

<div class="page-content">
 
  <div class="content-block-title">1 Slide Per View, 50px Between</div>
  <div class="swiper-container swiper-1">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      ...
      <div class="swiper-slide"><span>Slide 10</span></div>
    </div>
  </div>
 
  <div class="content-block-title">2 Slides Per View, 20px Between</div>
  <div class="swiper-container swiper-2">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      ...
      <div class="swiper-slide"><span>Slide 10</span></div>
    </div>
  </div>
 
  <div class="content-block-title">3 Slides Per View, 10px Between</div>
  <div class="swiper-container swiper-3">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      ...
      <div class="swiper-slide"><span>Slide 10</span></div>
    </div>
  </div>
 
  <div class="content-block-title">Vertical, 0px Between</div>
  <div class="swiper-container swiper-vertical">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      ...
      <div class="swiper-slide"><span>Slide 5</span></div>
    </div>
  </div>
 
  <div class="content-block-title">Slow speed</div>
  <div class="swiper-container swiper-slow">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Slide 1</span></div>
      <div class="swiper-slide"><span>Slide 2</span></div>
      ...
      <div class="swiper-slide"><span>Slide 10</span></div>
    </div>
  </div>
 
</div>

var myApp = new Framework7(); 
 
// 1 Slide Per View, 50px Between
var mySwiper1 = myApp.swiper('.swiper-1', {
  pagination:'.swiper-1 .swiper-pagination',
  spaceBetween: 50
});
 
// 2 Slides Per View, 20px Between
var mySwiper2 = myApp.swiper('.swiper-2', {
  pagination:'.swiper-2 .swiper-pagination',
  spaceBetween: 20,
  slidesPerView: 2
});
 
// 3 Slides Per View, 10px Between
var mySwiper3 = myApp.swiper('.swiper-3', {
  pagination:'.swiper-3 .swiper-pagination',
  spaceBetween: 10,
  slidesPerView: 3
});
 
// Vertical, 0px Between
var mySwiperVertical = myApp.swiper('.swiper-vertical', {
  pagination:'.swiper-vertical .swiper-pagination',
  direction: 'vertical'
});
 
// Slow speed
var mySwiperSlow = myApp.swiper('.swiper-slow', {
  pagination:'.swiper-slow .swiper-pagination',
  speed: 600
});

Nested Swipers

Let's initialize slider in this example using just HTML:

.swiper-slide {
  background:#fff;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin:20px;
  font-size:21px;
}

<div class="page-content">
  <!-- Horizontal parent slider -->
  <div data-pagination=".swiper-pagination-h"class="swiper-container swiper-init">
    <div class="swiper-pagination swiper-pagination-h"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span>Horizontal Slide 1</span></div>
      <div class="swiper-slide">
 
        <!-- Vertical nested child slider -->
        <div class="swiper-container swiper-init" data-pagination=".swiper-pagination-v" data-direction="vertical">
<div class="swiper-pagination swiper-pagination-v"></div>
<div class="swiper-wrapper">
  <div class="swiper-slide"><span>Vertical Slide 1</span></div>
  <div class="swiper-slide"><span>Vertical Slide 2</span></div>
  <div class="swiper-slide"><span>Vertical Slide 3</span></div>
</div>
        </div>
 
      </div>
      <div class="swiper-slide"><span>Horizontal Slide 3</span></div>
      <div class="swiper-slide"><span>Horizontal Slide 4</span></div>
    </div>
  </div>
 
</div>

Custom Controls

<div class="page-content">
  <div class="swiper-custom">
    <div class="swiper-container">
      <div class="swiper-pagination"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><span>Slide 1</span></div>
        <div class="swiper-slide"><span>Slide 2</span></div>
        <div class="swiper-slide"><span>Slide 3</span></div>
        <div class="swiper-slide"><span>Slide 4</span></div>
        <div class="swiper-slide"><span>Slide 5</span></div>
        <div class="swiper-slide"><span>Slide 6</span></div>
        <div class="swiper-slide"><span>Slide 7</span></div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

.swiper-custom {
  position:relative;
  height:100%;
}
.swiper-container {
  height:100%;
}
.swiper-slide {
  background: #fff;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin: 20px;
  font-size:21px;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: none;
  border:1px solid #aaa;
  border-radius: 0 0 0 0;
  opacity:1;
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  background: #007aff;
  border-color: #007aff;
}

var myApp = new Framework7(); 
 
var mySwiper = myApp.swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationHide: false,
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

Lazy Loading

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/4" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/5" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
  </div>
  <div class="swiper-pagination color-white"></div>
</div>

.swiper-container {
  height: 100%;
}
.swiper-slide {
  background: #000;
  position: relative;
}
.swiper-slide img {
  position: absolute;
  left:50%;
  top:50%;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

var mySwiper = new Swiper('.swiper-container', {
  preloadImages: false,
  lazyLoading: true,
  pagination: '.swiper-pagination'
})