Small Responsive Swiper For jQuery - Swiper.js

File Size: 2.55 MB
Views Total: 2110
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Small Responsive Swiper For jQuery - Swiper.js

A simple, lightweight, responsive, performant, touch-enabled swiper plugin based on jQuery that supports both desktop and mobile.

More features:

  • Hardware accelerated animation.
  • Inertial motion for all scrollable elements.
  • Switches between elements with mouse drag and touch swipe.

How to use it:

1. Add a collection of images (slides) to the swiper container.

<div id="mySwiper">
  <img src="1.png">
  <img src="2.png">
  <img src="3.png">
  <img src="4.png">
  <img src="5.png">
  <img src="6.png">

2. Import jQuery library and the jQuery swiper plugin into your html document.

<script src="" 
<script src="src/index.js"></script>

3. Initialize the swiper plugin and done.

const $mySwiper = $('#mySwiper')
const instance = tinySlick($track)

4. Specify the breakpoint which will be used to determine whether to switch between sildes.

const instance = tinySlick($track, {
      breakpoint: 0.2,  // 20%

5. Specify the rebound in pixels.

const instance = tinySlick($track, {
      rebound: 200

6. Switch between the slides manually.

// back to previous slide

// goto next slide

7. Event handlers.

// on event change
$mySwiper.on('event-type-change', (e, eventType) => {
  // eventType would be 'click' or 'mouse'(drag or touchmove).

// on position change
$mySwiper.on('pos-status-change', (e, posStatus) => {
  // posStatus would be 'START', 'MIDDLE' or 'END'.

This awesome jQuery plugin is developed by ulivz. For more Advanced Usages, please check the demo page or visit the official website.