Small Responsive Swiper For jQuery - Swiper.js

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

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">
  ...
</div>

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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
instance.slideTo('PREV')

// goto next slide
instance.slideTo('NEXT')

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.