Fix enable()

virchual [virtual]

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

View Demo »

✨ 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.

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.

Current State of Virchual

Alpha version: Implementation of basic slider, controls, pagination, lazy loading images
Basic vanilla JavaScript example
Preact example (ongoing)
React example
Vue.js example
Stable API
Make it smaller

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

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

Clone the repo

git clone github.com/berndartmueller/virchual.git

Install NPM packages

npm install

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.

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

License

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

Contact

Bernd Artmüller - @berndartmueller - [email protected]

Donate

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

berndartmueller / virchual Goto Github PK

virchual's Introduction

virchual [virtual]

✨ Highlights

Table of Contents

About

Current State of Virchual

Installation

CDN

Basic

Complete

Modular

NPM & Yarn

Usage

Options

API

Virchual

Virchual#mount

Virchual#on

Virchual#off

Virchual#prev

Virchual#next

Virchual#destroy

Browser Support

Contributing

Getting Started

Running Tests

License

Related

Contact

Donate

virchual's People

Contributors

Stargazers

Watchers

Forkers

virchual's Issues

Recommend Projects

Recommend Topics

Recommend Org