Swiper documentation

Installation

There are few options on how to include/import Swiper into your project:

Use Swiper Core CSS and JS Files from CDN

<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css"/>
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>

Include UNDP specific Swiper CSS and JS

In addition to Swiper's Core CSS styles, we may need to add some custom styles to set Swiper custom carousels.

<link rel="stylesheet" href="dist/css/base-minimal.min.css"/>
<link rel="stylesheet" href="dist/css/components/cta-link.min.css"/>
<link rel="stylesheet" href="dist/css/components/buttons.min.css"/>

Based on the Carousel types, i.e. "Fluid, Fixed or Image carousel, use either of the corresponding minified CSS in your HTML.

<link rel="stylesheet" href="dist/css/components/fluid-image-size-carousel.min.css"/>
<!-- or -->
<link rel="stylesheet" href="dist/css/components/fixed-size-carousel.min.css"/>
<!-- or -->
<link rel="stylesheet" href="dist/css/components/image-only-carousel.min.css"/>

Include the UNDP specific Swiper CSS and JS

<link rel="stylesheet" href="dist/css/components/swiper.min.css"/>
<script src="dist/js/swiper.min.js"></script>

Incase of custom viewport animations, we need to include the Viewport Js for animations.

<script src="dist/js/viewport.min.js"></script>

Usage

Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our HTML:

<!-- Slider main container -->
<div class="fixed-carousel">

  <!-- Slider scrollbar -->
  <div class="swiper-scrollbar"></div>

  <!-- Slider 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>
    ...
  </div>

</div>

Kindly note: To set the animation on the HTML elements, use the data-viewport="true" attribute on that element.

Initialize Swiper

Finally, we need to initialize Swiper in JS: Again based on the Carousel type use either of the methods to initialize swiper instance.

swiper('.fixed-carousel', '.fixed-carousel__button-wrap');
<!-- or -->
swiper('.fluid-carousel', '.slide-content');
<!-- or -->
swiper('.image-carousel', '.slider-slide');

Swiper Options

Data Attributes

You can specify some data attribites to each swiper instance, the available attribites are:

Option	Type	Default	Description
data-swiper-speed	number	500	Duration of transition between slides (in ms)
data-swiper-slides-view-mobile data-swiper-slides-view-tablet data-swiper-slides-view-desktop	number | 'auto'	1	Number of slides per view (slides visible at the same time on slider's container). There are some limitations for this option. Check them here
data-swiper-gutterspace	number	20	Distance between slides in px. There are some limitations for this option. Check them here
data-swiper-loop	boolean	false	Set to true to enable continuous loop mode. Additional explanation for this option can be read here
data-swiper-offset	number	0	Add (in px) additional slide offset in the beginning of the container (before all slides)
data-swiper-desktop data-swiper-tablet data-swiper-mobile data-swiper-all	object	{}	Initialise swiper in Mobile, Tablet, Desktop or All devices only.

Example use of the attributes:

<!-- Slider main container -->
<div class="fixed-carousel" data-swiper-speed="200" data-swiper-slides-view-mobile="2" data-swiper-loop="true" data-swiper-desktop data-swiper-mobile>

  <!-- Slider scrollbar -->
  <div class="swiper-scrollbar"></div>

  <!-- Slider 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>
    ...
  </div>

</div>

Parameters

These options are javascript objects that can directly be passed as function argument.
The extensive list of all available parameters can be found here.

The swiper() method accepts 3 arguments in UNDP, and all swiper options needs to be passed as third argument.

swiper (selector, arrowsSelector, options)

Example use of the attributes (Page hero card in our case):

<script>
  let options = {
    breakpoints: {
      768: { 'slidesPerView': 2 }
    }
  }

  // Use `options` object as third argument in the function call.
  swiper('.pagehero-cards-items', false, options);
</script>

For more extensive technical documentation and examples you can refer to Swiper Documentation