virchual
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-alpha.12 • Public • Published

    Logo

    virchual [virtual]

    Super-fast, lightweight (<2.8kB) slider/carousel with virtual slides. Written in TypeScript. Tree-shakeable. 0 dependencies!

    View Demo »

    npm (tag) npm bundle size Travis (.org)


    Highlights

    • Lightweight. Only <2.8kB (gzipped).
    • Virtual slides to keep DOM elements at a minimum (Lighthouse ❤️ it)
    • Instagram like pagination bullets.
    • 0 dependencies. Everything included.
    • Written in TypeScript.

    Table of Contents

    About

    This image swiper/slider/carousel library, written in TypeScript, aims to provide a high-performance slider best used when having many instances on a page (e.g. list of cards where each card has a swiper gallery - like Airbnb or hometogo).

    Virchual uses virtual slides to only render visible slides. No unnecessary DOM elements.

    Installation

    CDN

    Just add a link to the css file in your <head>:

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/virchual@next/dist/virchual.css" />

    Then, before your closing <body> tag add:

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/virchual@next/dist/index.bundle.js"></script>

    Basic

    dist/virchual.js dist/virchual.umd.js dist/virchual.modern.js

    Complete

    dist/virchual.bundle.js dist/virchual.bundle.umd.js dist/virchual.bundle.modern.js

    Modular

    dist/virchual.modular.js dist/virchual.modular.umd.js dist/virchual.modular.modern.js

    NPM & Yarn

    $ npm install virchual

    or

    $ yarn install virchual

    Usage

    Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

    Example HTML:

    <div class="virchual">
      <div class="virchual__frame"></div>
    </div>
    import 'virchual/dist/index.css';
    
    import { Virchual } from 'virchual';
    
    const slider = new Virchual(document.querySelector('.virchual'), {
      slides: () => {
        return [
          '<img src="image.jpg"/>', // slide 1
          '<img src="image2.jpg"/>', // slide 2
        ];
      },
    });
    
    slider.mount();

    Options

    Name Type Description Required Default
    slides `Array Function` Slides Yes
    speed Number Slide transition speed No 200
    easing String Slide transition easing No ease-out
    transitionDuration Number staying duration of per slide/swipe item No 200ms
    window Number How many slide clones on left and right side No 1

    API

    Virchual

    Virchual(element: HTMLElement, settings: VirchualSettings): Virchual

    Virchual constructor. Creates a new Virchual slider instance.


    Virchual#mount


    Virchual.mount();

    Mount slider and bind DOM events.

    Virchual#on


    Virchual.on(events: string, handler: () => {}, elm: HTMLElement);

    Add event listener for given event(s).

    instance.on('mount', () => {
      console.log('Slider mounted.');
    });
    
    // multiple events can be defined by seperating with a whitespace
    
    instance.on('mount destroy', () => {
      console.log('Slider mounted/destroy.');
    });

    Virchual#off


    Virchual.off(events: string);

    Remove event listener for given event(s).

    instance.off('mount');
    
    // multiple events can be defined by seperating with a whitespace
    
    instance.off('mount destroy');

    Virchual#prev


    Virchual.prev();

    Move to previous slide. Rewind in case first slide is currently shown.

    Virchual#next


    Virchual.next();

    Move to next slide. Rewind in case last slide is currently shown.

    Virchual#destroy


    Virchual.destroy();

    Unmount slider, remove DOM events for this instance.


    Browser Support

    Virchual was tested in the following browsers:

    • Safari
    • Mobile Safari
    • Opera
    • Edge
    • Firefox
    • Internet Explorer 11

    Contributing

    Getting Started

    1. Clone the repo
    git clone github.com/berndartmueller/virchual.git
    1. Install NPM packages
    npm install
    1. Run
    npm run dev

    Running Tests

    npm run test

    Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
    3. Commit your Changes (git commit -m 'Add some AmazingFeature')
    4. Push to the Branch (git push origin feature/AmazingFeature)
    5. Open a Pull Request

    License

    Distributed under the MIT License. See LICENSE for more information.

    Related

    tbd

    Contact

    Bernd Artmüller - @berndartmueller - hello@berndartmueller.com

    Donate

    If you want to support me, you can buy me a coffee to keep me coding -> https://www.buymeacoffee.com/berndartmueller

    Install

    npm i virchual

    DownloadsWeekly Downloads

    7

    Version

    1.0.0-alpha.12

    License

    MIT

    Unpacked Size

    629 kB

    Total Files

    81

    Last publish

    Collaborators

    • berndartmueller