Lightweight Mobile-friendly Carousel Library with vanilla JS | VanillaSlider


VanillaSlider is a simple, lightweight, and responsive slider using vanilla JavaScript, and it does not require third-party libraries.

owl carousel, carousel library javascript, carousel slider, bootstrap carousel, best carousel library, slick carousel, carousel library react, best carousel library js


  • Works with WebP image format.
  • Perform cross fade and zoom transitions.
  • Auto-rotate across slides at a certain speed.
  • Custom navigation controls.
  • Works with still images or dynamic image lists.

How to make use of it:

1. Simply import the vanillaSlider library into your document.

<script src="vanilla-slider.js"></script>

2. Wrap your images in a DIV container.

<div id="slider-example">
  <img src="img/1.jpg">
  <a href="#">
    <img src="img/2.jpg">
  <a href="#" target="_blank">
    <img src="img/3.jpg">

3. Configure the library to create a virtual photo library.

var mySlider = createSlider('slider-example', {
    // options here

4. Or define the image information in the JS array as follows:

var myImages = [
      imageUrl: 'img/2.jpg',
      linkUrl: '#',
      webpUrl: 'img/2.webp',
      linkNewTab: true,
      alt: 'image 2',
      title: 'image 2'
        imageUrl: 'img/3.jpg',
        linkUrl: '#',
        linkNewTab: true,
        alt: 'image 3',
        textTitle: 'Overlay Text',
        textBody: 'More Description',
        textPosition: 'NW', // 'SW', 'NW', 'NE', or 'SE'
var mySlider = createSlider('slider-example', {
    images: myImages

5. Customize transition effects.

var mySlider = createSlider('slider-example', {

    // in ms
    transitionTime: 250

    // x direction for fading out element to move
    // 'left', 'right', or 'random'
    transitionDirectionX: null

    // y direction for fading out element to move
    // 'in', 'out', or 'random'
    transitionDirectionY: null

    // direction for zooming the fading out element
    // 'in', 'out', or 'random'
    transitionZoom : null

6. Enable and disable touch swipe support.

var mySlider = createSlider('slider-example', {

    swipe: false


7. Customize the navigation and pagination controls.

var mySlider = createSlider('slider-example', {

    // shows pagination bullets
    bullets: false,

    // hides pagination bullets on mouse out
    bulletsHide: false,

    // color of active bullet
    bulletColor: 'red',

    // shows navigation arrows
    arrows: true,

    // hides navigation arrows on mouse out
    arrowsHide: true


8. Configure the autorun behavior.

var mySlider = createSlider('slider-example', {

    // enable autoplay?
    auto: false,

    // autoplay interval
    autoTime: 10000,

    // pause on hover?
    autoPauseOnHover: true


9. Determine whether WebP images will be supported.

var mySlider = createSlider('slider-example', {

    webp: true


10. API methods are available to control the carousel programmatically.

// get the index of the next slide

// get the index of the prev slide

// go to the next slide with an optional callback

// back to the previous slide with an optional callback

// go to a specific slide with an optional callback
mySlider.goToSlide(index, callback);

// start autoplay

// pause 

// stop autoplay

Feature-rich Mobile-friendly Carousel Library, VanillaSlider Plugin/Github

See Demo And Download

Official Website(rchisholm): Click Here

This superior jQuery/javascript plugin is developed by rchisholm. For extra Advanced Usages, please go to the official website.