Feature-rich Mobile-friendly Carousel Library – VanillaSlider

VanillaSlider is a feature-rich, mobile-friendly, and full responsive carousel library written in pure JavaScript.

Features:

• Works with WebP image format.
• Performant cross-fading and zoom transitions.
• Auto-rotate through slides at a certain speed.
• Custom navigation controls.
• Works with static images or dynamic image list.

How to use it:

1. Just import the VanillaSlider library into the document and we’re ready to go.

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

2. Wrap your images into 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. Initialize the library to generate a default image carousel.

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

4. Or define the image information in a 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 the 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 & disable touch swipe support. Default: true.

var mySlider = createSlider('slider-example', {
    swipe: false
});

7. Customize the navigation & 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. Config the autoplay behavior.

var mySlider = createSlider('slider-example', {
    // enable autoplay?
    auto: false,
    // autoplay interval
    autoTime: 10000,
    // pause on hover?
    autoPauseOnHover: true
});

9. Determine whether to support WebP images. Default: false.

var mySlider = createSlider('slider-example', {
    webp: true
});

10. Set the styles of the text.

var mySlider = createSlider('slider-example', {
    textOverlayClasses: null,
    staticTextPosition: 'SW' // 'SW', 'NW', 'NE', or 'SE'
});

11. Available API methods 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();

Changelog:

06/15/2024

• added textOverlayClasses

01/05/2021

• overlay fix

11/11/2021

• Package update