Swiper API

Swiper Full HTML Layout

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required 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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Initialize Swiper

Now, when we have Swiper's HTML, we need to initialize it using the following function:

For example:

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

Swiper Parameters

Let's look on list of all available parameters:

fade: {
  crossFade: false
}

cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 20,
  shadowScale: 0.94
}

coverflow: {
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows : true
}

var swiper = new Swiper('.swiper-container', {
  //...
  paginationBulletRender: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});              

Slider Methods & Properties

After we initialize Slider we have its initialized instance in variable (like mySwiper variable in example above) with helpful methods and properties:

mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')
mySwiper.appendSlide([
   '<div class="swiper-slide">Slide 10"</div>', 
   '<div class="swiper-slide">Slide 11"</div>'
]);

mySwiper.prependSlide('<div class="swiper-slide">Slide 0"</div>')
mySwiper.prependSlide([
   '<div class="swiper-slide">Slide 1"</div>', 
   '<div class="swiper-slide">Slide 2"</div>'
]);

mySwiper.removeSlide(0); //remove first slide
mySwiper.removeSlide([0, 1]); //remove first and second slides

Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened.

To make it work, you need to enable it by passing hashnav:true parameter and adding slides hashes in data-hash attribute:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
        ...
    </div>
</div>

var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashnav: true
})

Parallax

Since version 3.0.3 Swiper supports parallax transition effects for swiper/slides nested elements. There are two types of parallax elements supported:

• Direct child elements of swiper-container. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds
• Slides child elements. Parallax effect for such elements will depend on slide progress

To enable parallax effects you need to init Swiper with passed parallax:true parameter and add data-swiper-parallax attribute on required elements

<div class="swiper-container">
    <!-- Parallax background element -->
    <div 
        class="parallax-bg" 
        style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" 
        data-swiper-parallax="-23%">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Each slide has parallax title -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- Parallax subtitle -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- And parallax text with custom transition duration -->
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>
        ...
    </div>
</div>

All elements with specified data-swiper-parallax attribute will have parallax transition. This attribute may accept:

• number - value in px (as for title, subtitle in example above) to move element depending on progress. In this case such element will be moved on ± this value in px depending on slide position (next or previous)
• percentage - (as for "parallax-bg") to move element depending on progress and on its size. In this case such element will be moved on ± this percentage of its size (width in horizontal direction, and height in vertical direction) depending on slide position (next or previous). So if element has 400px width and you specified data-swiper-parallax="50%" then it will be moved on ± 200px

It is possible to overwrite parallax direction by using data-swiper-parallax-x and data-swiper-parallax-y attributes with same rules

You can also pass custom transition duration for parallax elements by adding data-swiper-parallax-duration attribute.

Lazy Loading

To enable lazy loading, first of all we need special layout for images or elements with backround in slides:

<div class="swiper-container">
    <div class="swiper-wrapper">
 
        <!-- Lazy image -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
 
        <!-- Element with lazy background image -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>
 
        <!-- Lazy background image on slide itself -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div> 

As you see:

• Each lazy loaded image/element should have additional "swiper-lazy" class
• Lazy image source for <img> element should be specified in "data-src" attribute instead of "src"
• Lazy background image source should be specified in "data-background" attribute

You may also add animated preloader spinner to slide which will be removed automatically after image loaded:

<div class="swiper-lazy-preloader"></div>

Or white-one for dark layout:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

After that we need to enable lazy loading on Swiper initialization:

var swiper = new Swiper('.swiper-container', {
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazyLoading: true
});    

Emitter API / Events

Emitter API allows to you add events/callbacks to Swiper like usual events, even after Swiper initialization:

// Init Swiper
var mySwiper = new Swiper('.swiper-container');
 
// Later add callback
mySwiper.on('slideChangeStart', function () {
    console.log('slide change start');
});
 
// Add one more handler for this event
mySwiper.on('slideChangeStart', function () {
    console.log('slide change start 2');
});
 
// Add handler that will be executed only once
mySwiper.once('sliderMove', function () {
    console.log('slider moved');
});
 
// Somewhen later, remove all slideChangeStart handlers
mySwiper.off('slideChangeStart');  

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 Swiper's HTML container element:

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