swiperrunner's Introduction

Swiper Runner

An easy way to use Swiper.js in your project with various options comes with Swiper as API.

Swiper Runner is a addon for Swiper.js

Usage Example:

Load the SuperRunner.js file as right after jquery.js and swiper.js loaded.

MARKUP: In this code you can see a attribute called "data-swiper-config" and here you can add your carousel configuration provided by Swiper API documentation as JSON Objects.

<div
   class="swiper-container"
   data-swiper-config='{"loop": true, "autoplay": 3000, "grabCursor": true, "paginationClickable": true}'
>
  <div class="swiper-wrapper">
    ....
    <div class="swiper-slide">Slide X</div>
    ....
  </div>

  <!-- Swiper Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Swiper Nav Prev -->
  <div class="swiper-button-prev"></div>
  <!-- Swiper Nav Next -->
  <div class="swiper-button-next"></div>
</div>

SCRIPT:

var runner = new SwiperRunner('.swiper-container');

or you can create mullitple slider with with jQuery .each() function.

$('.swiper-container').each(function() {
	var $this = $(this);

	new SwiperRunner($this);
});

Please check examples folder for demos

swiperrunner's People

Contributors

Stargazers

Watchers

swiperrunner's Issues

Need perfect integration with animate.css

Currently, basic support is available with swiperRunner but need to think about transition delay and animation delay as automatically calculated by elements.

What do you say? You can suggest me here.

Recommend Projects