Feature-rich Mobile-friendly Carousel Library – VanillaSlider

Category: Javascript , Slider | May 18, 2020
Author:rchisholm
Views Total:742 views
Official Page:Go to website
Last Update:May 18, 2020
License:MIT

Preview:

Feature-rich Mobile-friendly Carousel Library – VanillaSlider

Description:

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. 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();

You Might Be Interested In:


Leave a Reply