slideswap v1.0.0

slideswap

Minimal and performant fade slideshow written in pure JavaScript that leans as much as possible on CSS animations. Responsiveness is native, no resize listener. Uses your elements, doesn't detach them or clone them. Provided as ESM and IIFE.

Features

• No dependencies
• Small footprint
• CSS animations, transition duration is set in CSS
• ESM and IIFE
• Adaptive height (also animated)
• Responsive (no resize listener)
• Uses your elements, doesn't detach them or clone them
• Supports touch events (swipe) and mouse events (swipe simulation)
• Supports infinite loop
• Custom next and prev buttons
• No CLS (Cumulative Layout Shift) if you set initial classes and start from the first slide

Demo

https://stamat.github.io/slideswap/

Installation

NPM

npm install slideswap

Yarn

yarn add slideswap

Include the module in your project

import Slideswap from 'slideswap'; // If you have node_modules resolution, if not than add the path to the module

Include the SCSS file in your project or copy the styles from it, it's a very small CSS inside

@import 'slideswap'; // If you have node_modules resolution, if not than add the path to the SCSS file

CDN

<script src="https://unpkg.com/slideswap/dist/slideswap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slideswap/dist/slideswap.min.css">

Usage

Basic usage

<div id="slider-controls-1" class="slideswap-controls">
  <button class="js-slideswap-prev">Prev</button>
  <button class="js-slideswap-next">Next</button>
</div>
<div id="slider-1" class="slideswap-slides">
  <div class="slideswap-slide">Slide 1</div>
  <div class="slideswap-slide">Slide 2</div>
  <div class="slideswap-slide">Slide 3</div>
</div>

<script type="text/javascript">
  const slider = new Slideswap('#slider-1', {
    next: '#slider-controls-1 .js-slideswap-next',
    prev: '#slider-controls-1 .js-slideswap-prev',
    infinite: true
  });

  slider.element.addEventListener('slideswap:beforechange', (e) => {
    console.log(e.detail);
  });

  document.addEventListener('slideswap:beforechange', (e) => {
    console.log(e.detail);
  });

  slider.element.addEventListener('slideswap:change', (e) => {
    console.log(e.detail);
  });

  document.addEventListener('slideswap:change', (e) => {
    console.log(e.detail);
  });

  // slider.next(); - to go to the next slide
  // slider.previous(); - to go to the previous slide
  // slider.setCurrentSlide(index); - to go to a specific slide
  // slider.getCurrentSlide(); - to get the current slide index
  // slider.getNextIndex(); - to get the next slide index
  // slider.getPreviousIndex(); - to get the previous slide index
  // slider.getCurrentIndex(); - to get the current slide index
  // slider.getSlidesCount(); - to get the total number of slides
  // slider.destroy(); - to destroy the instance
  // slider.init(element, options); - to reinit the instance (if you have destroyed it)
</script>

The constructor accepts two arguments, the first one is the element or selector for the element and the second one is the options object.

new Slideswap(element, options);

Options

Events

Events are triggered for each instance element and for the document. The event detail contains the object the target slide index and the previous slide index.

Methods

Public properties

TODO

• Add autoplay
• Add bullet navigation
• Add keyboard navigation
• Fix animation on current slide remove
• Wheel event support?