Small Responsive Swiper For jQuery - Swiper.js
File Size: | 2.55 MB |
---|---|
Views Total: | 2097 |
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.