Press "Enter" to skip to content

Lightweight and Supports Touch Swiper Slider in Pure JavaScript | Tiny-Swiper

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *