Lightweight Mobile-friendly Carousel Library with vanilla JS | VanillaSlider

carousel-library-javascript

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

Features:

  • 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>
  <a href="#" target="_blank">
    <img src="img/3.jpg">
  </a>
</div>

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 = [
    'img/1.jpg',
    {
      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
mySlider.getNextIndex();

// get the index of the prev slide
mySlider.getPrevIndex();

// go to the next slide with an optional callback
mySlider.nextSlide(callback);

// back to the previous slide with an optional callback
mySlider.prevSlide(callback);

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

// start autoplay
mySlider.startAuto();

// pause 
mySlider.pauseAuto();

// stop autoplay
mySlider.stopAuto();

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.