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.