Minimal Pure JavaScript Image Carousel Slider – slide.js

slide.js is a lightweight, dependency-free JavaScript slider library for switch between an array of images with horziontal/vertical sliding or cross-fading effects.

How to use it:

Load the necessary JavaScript and CSS files in the html file.

<link rel="stylesheet" href="dist/css/slide.css">
<script src="dist/js/slide.js"></script>

Create a DIV element that will be severed as the container for the slider.

<div id="slide"></div>

Create a new Slider object and specify an array of images you want to present.

new Slide('#slide', {
    imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ]
});

Change the default sliding direction to ‘horizontal’.

new Slide('#slide', {
    imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ],
    animation: 'slideLeft'
});

Set the animation to ‘fade’ so the slider will act as a cross-fading slideshow.

new Slide('#slide', {
    imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ],
    animation: 'fade'
});

Specify the fixed height / width of your slider.

new Slide('#slide', {
    imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ],
    width: 600, 
    height: 400,
});

Config the autoplay behavior.

new Slide('#slide', {
    imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
    ],
    autoswitch: {
      open: true,
      delay: 2000
    },
});