Tiny Responsive Slideshow In Pure JavaScript – Diapositive.js

Category: Javascript , Slideshow | July 9, 2020
Views Total:267 views
Official Page:Go to website
Last Update:July 9, 2020


Tiny Responsive Slideshow In Pure JavaScript – Diapositive.js


Diapositive.js is a small, fast, configurable, developer-friendly JavaScript slideshow library to loop through a group of elements with a cross-fade effect.

How to use it:

1. Install and import the Diapositive.js as a module.

$ npm install diapositive --save
import Diapositive from 'diapositive';

2. Or load the Diapositive.js script from a CDN.

<script src="https://unpkg.com/diapositive@latest/dist/diapositive.js"></script>

3. Insert elements to the slideshow.

<div class="slider">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
  <img src="5.jpg" alt="">
<!-- Or HTML elements -->
<div class="slider">
  <div class="slider-el">A</div>
  <div class="slider-el">B</div>
  <div class="slider-el">C</div>
  <div class="slider-el">D</div>
  <div class="slider-el">E</div>

4. Initialize the slideshow and done.

const diapositive = new Diapositive('.slider');

5. Enable/disable the autoplay mode. Default: false (disable).

const diapositive = new Diapositive('.slider',{
      autoPlay: true,
      time: 2000 // interval

6. Default CSS classes. Useful for custom slideshow styles.

const diapositive = new Diapositive('.slider',{
      className: 'active',
      activeClassName: 'active',
      prevClassName: '',
      nextClassName: ''

7. Specify which slide  (0 indexed) to show on init.

const diapositive = new Diapositive('.slider',{
      startAt: 1 // slide 2

8. API methods.

// go to the next
// back to the previous
// go to a specific slide
// start the autoplay
// stop the autoplay

9. Trigger a function each time the slide changes.

diapositive.on('change', (index) => {
  console.log('Slide changed to:', index);


v1.13.4 (03/02/2020)

  • Update

v1.12.0 (03/02/2020)

  • Allow for a selector other than string

v1.11.0 (01/07/2020)

  • Add depreciation warning

You Might Be Interested In:

Leave a Reply