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