Feature-rich Mobile-friendly Carousel Library – VanillaSlider

Category: Javascript , Slider | June 15, 2024
Views Total:63 views
Official Page:Go to website
Last Update:June 15, 2024


Feature-rich Mobile-friendly Carousel Library – VanillaSlider


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


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

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 = [
      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
// 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



  • added textOverlayClasses


  • overlay fix


  • Package update

You Might Be Interested In:

One thought on “Feature-rich Mobile-friendly Carousel Library – VanillaSlider

  1. Marc

    Can I use mutltiple sliders in one page without calling “createSlider” for each slider?


Leave a Reply