Tiny Swiper is a small but fully configurable touch scrolling tool for creating responsive, mobile-friendly sliders, one-page scrolling web pages, single-page apps, and more.
Lightweight yet expandable. Import plugins as needed, no more, no less. Written in TypeScript, are free to use and without any attribution.
swiper slider responsive code, swiper slider demo, swiper slider autoplay swiper set active slide, swiper slide width, swiper slide width too large
Features:
- Written in pure JavaScript.
- Supports horizontal and vertical scrolling.
- Custom navigation and page numbering controls.
- infinite loop.
- The image loader is lazy.
- Keyboard interactions.
- To switch between slides by mouse dragging, touch scrolling, and mouse wheel events.
How to make use of it:
1. Install & download the library.
# Yarn $ yarn add tiny-swiper # NPM $ npm install tiny-swiper --save
2. Import the tiny-swiper as an ES module.
import Swiper, { // OPTIONAL Plugins SwiperPluginLazyload, SwiperPluginPagination, SwiperPluginKeyboardControl } from 'tiny-swiper'
// Register plugins Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination, SwiperPluginKeyboardControl ])
3. Or straight load mandatory JavaScript information from CDN.
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.min.js"></script> <script src="https://unpkg.com/tiny-swiper@latest/lib/modules/lazyload.min.js"></script> <script src="https://unpkg.com/tiny-swiper@latest/lib/modules/pagination.min.js"></script> <script src="https://unpkg.com/tiny-swiper@latest/lib/modules/keyboardControl.min.js"></script>
4. Insert slides to the swiper following the markup structure as these:
<div class="swiper-container" id="example"> <div class="swiper-wrapper"> <!-- Slides --> <div class="a swiper-slide">1</div> <div class="b swiper-slide">2</div> <div class="c swiper-slide">3</div> <div class="d swiper-slide">4</div> <div class="e swiper-slide">5</div> ... </div> <!-- OPTIONAL PAGINATION CONTROLS HERE --> <div class="swiper-plugin-pagination"></div> </div>
5. Initialize the swiper and customize the pagination controls.
var mySwiper = new Swiper('#example', { pagination: { el: ".swiper-plugin-pagination", clickable: true, bulletClass: 't-ScrollBar__item', bulletActiveClass: 'is-active' }, plugin: [ SwiperPluginPagination ] });
6. Enable image lazy loading.
Swiper.use([SwiperPluginLazyload]); var mySwiper = new Swiper('#example', { lazyload: { loadPrevNext: false, loadPrevNextAmount: 1, loadOnTransitionStart: false, elementClass: 'swiper-lazy', loadingClass: 'swiper-lazy-loading', loadedClass: 'swiper-lazy-loaded', preloaderClass: 'swiper-lazy-preloader' }, plugins: [SwiperPluginLazyload] });
7. Enable keyboard interactions.
Swiper.use([SwiperPluginLazyload]); var mySwiper = new Swiper('#example', { keyboard: { enabled: true, onlyInViewport: true }, plugins: [SwiperPluginKeyboardControl] });
8. Full plugin choices to customize the swiper as per your wants.
var mySwiper = new Swiper('#example', { // or 'vertical' direction: 'horizontal', // touch ratio touchRatio: 1, // angle (in degrees) to trigger touch move // also allows a range of values: [0, 90]. touchAngle: 45, // ratio to trigger swipe longSwipesRatio: 0.5, // initial slide // 0 = slide 1 initialSlide: 0, // infinite loop loop: false, // free mode freeMode: false, // enables mouse wheel mousewheel: false, // enable passive event listeners passiveListeners: true, // enable/disable resistance bounds resistance: true, // resistance ratio resistanceRatio: 0.85, // animation speed speed: 300, // minimal duration (in ms) to trigger swipe longSwipesMs: 300, // time to suspend between two swip actions intermittent: 0, // space between slides spaceBetween: 0, // number of slides per view slidesPerView: 1, // center the current slide centeredSlides: false, // default CSS classes slidePrevClass: 'swiper-slide-prev', slideNextClass: 'swiper-slide-next', slideActiveClass: 'swiper-slide-active', slideClass: 'swiper-slide', wrapperClass: 'swiper-wrapper', // prevent touchstart (mousedown) event touchStartPreventDefault: true, // prevent default for touchstart (mousedown) event touchStartForcePreventDefault: false, // if enabled, the propagation of "touchmove" will be stopped touchMoveStopPropagation: false, // exclude these elements excludeElements: [], injections: { translate: translate } });
9. API strategies.
// update the instance mySwiper.update(); // update swiper size mySwiper.updateSize(); // destroy the instance mySwiper.destroy(); // scroll to a specific slide mySwiper.scroll(index: number, force: boolean);
10. Event handlers.
mySwiper.on('before-init', function(instance){ // ... }) mySwiper.on('after-init', function(instance){ // ... }) mySwiper.on('before-slide', function(currentIndex, state, newIndex){ // ... }) mySwiper.on('scroll', function(state){ // ... }) mySwiper.on('after-slide', function(newIndex, state){ // ... }) mySwiper.on('before-destroy', function(instance){ // ... }) mySwiper.on('after-destroy', function(instance){ // ... })
Lightweight Touch-enabled Swiper, Tiny Swiper Plugin/Github
See Demo And Download
Official Website(joe223): Click Here
This superior jQuery/javascript plugin is developed by joe223. For extra Advanced Usages, please go to the official website.
Be First to Comment