Super-fast, lightweight (<2.8kB) slider/carousel with virtual slides. Written in TypeScript. Tree-shakeable. 0 dependencies!
View Demo »
- 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.
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.
- 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
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>dist/virchual.js dist/virchual.umd.js dist/virchual.modern.js
dist/virchual.bundle.js dist/virchual.bundle.umd.js dist/virchual.bundle.modern.js
dist/virchual.modular.js dist/virchual.modular.umd.js dist/virchual.modular.modern.js
$ npm install virchualor
$ yarn install virchualUse 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();| 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 |
Virchual(element: HTMLElement, settings: VirchualSettings): VirchualVirchual constructor. Creates a new Virchual slider instance.
Virchual.mount();Mount slider and bind DOM events.
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(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();Move to previous slide. Rewind in case first slide is currently shown.
Virchual.next();Move to next slide. Rewind in case last slide is currently shown.
Virchual.destroy();Unmount slider, remove DOM events for this instance.
Virchual was tested in the following browsers:
- Safari
- Mobile Safari
- Opera
- Edge
- Firefox
- Internet Explorer 11
- Clone the repo
git clone github.com/berndartmueller/virchual.git- Install NPM packages
npm install- Run
npm run devnpm run testContributions 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
Distributed under the MIT License. See LICENSE for more information.
tbd
Bernd Artmüller - @berndartmueller - hello@berndartmueller.com
If you want to support me, you can buy me a coffee to keep me coding -> https://www.buymeacoffee.com/berndartmueller