VanillaSlider is a simple, lightweight, responsive slider using vanilla JavaScript, requiring no third-party libraries.
Now with smart/safe WebP support!
To use VanillaSlider, first, embed the script in HTML:
<script type='text/javascript' src='vanilla-slider.js'></script>Then, define the slider container's id and the options object, and call createSlider:
<script>
var containerId = 'slider-1';
var options = {
transitionTime: 500,
transitionZoom: 'in',
bullets: true,
arrows:true,
arrowsHide: true,
images: [
'img/1.jpg',
'img/2.jpg',
'img/3.jpg',
'img/4.jpg'
]
}
var slider = createSlider(containerId, options);
</script>
<div id='slider-1'></div>- Slider using all custom options
- Slider using only default options
- Slider using the full browser width
- Slider inside a div with a max width
- Slider with text overlays
containerId is a required parameter. It can either be the element to be used as the container for the slider, or the element's id:
var containerId = document.getElementById('slider-1');var containerId = 'slider-1';options is an optional parameter. If omitted, default values are used.
| Option | Type | Description | Default |
|---|---|---|---|
| images | Array<string|object> | array of images, either strings (URLs) or objects with imageUrl, linkUrl, linkNewTab, textTitle, textBody, textPosition | null |
| transitionTime | number | time in ms until transition is finished; | 250 |
| transitionDirectionX | string | x direction for fading out element to move - 'left', 'right', or 'random' | null |
| transitionDirectionY | string | y direction for fading out element to move - 'up', 'down', or 'random' | null |
| transitionZoom | string | direction for zooming the fading out element - 'in', 'out', or 'random' | null |
| bullets | boolean | whether to show bullets | false |
| bulletsHide | boolean | whether to hide bullets on mouse out | false |
| bulletColor | string | color of active bullet | 'red' |
| arrows | boolean | whether to show arrows | true |
| arrowsHide | boolean | whether to hide arrow on mouse out | true |
| staticTextTitle | string | static text title to overlay on slider (if any) | null |
| staticTextBody | string | static text body to overlay on slider (if any) | null |
| staticTextPosition | string | position for static text - 'SW', 'NW', 'NE', or 'SE' | 'SW' |
| swipe | boolean | whether to allow swipe support | true |
| auto | boolean | whether to automatically move slides | false |
| autoTime | number | time in ms for slides to automatically move | 10000 |
| autoPauseOnHover | boolean | whether to pause auto when hovering | true |
| webp | boolean | whether to support webp images | false |
options.images is a property of the options parameter. It is an array of strings or objects, and can be used to determine the images used for the slider. Each element in the images array can either be a string (used for imageUrl) or an object with the following properties:
| Property | Type | Description | Default |
|---|---|---|---|
| imageUrl | string | URL of the image to be used in the slide | (required) |
| linkUrl | string | URL of the link to be placed on the slide | no default - if omitted, no link is used |
| linkNewTab | boolean | determines whether this slide's link will open in a new tab | false |
| textTitle | string | title for the text overlay placed on the slide | no default - if omitted, title is not shown |
| textBody | string | title for the text overlay placed on the slide | no default - if omitted, body is not shown |
| textPosition | string | position for text overlay; 'SW', 'NW', 'NE', or 'SE' | 'SW' |
| webpUrl | string | URL of the webp image to be used as src if webp is supported | no default - if omitted, webp will not be used |
| alt | string | string to be used for the img 'alt' attribute | no default |
| title | string | string to be used for the img 'title' attribute | no default |
var options = {
transitionTime: 1000,
transitionDirectionX: 'left',
transitionDirectionY: 'up',
transitionZoom: 'in',
bullets: true,
bulletColor: 'blue',
bulletsHide: true,
arrows: true,
arrowsHide: true,
staticTextTitle: 'Hello World!',
staticTextBody: 'This is the static text.',
staticTextPosition: 'NW',
swipe: true,
auto: true,
autoTime: 5000,
autoPauseOnHover: true,
webp: true,
images: [
'img/1.png',
{
imageUrl: 'img/2.png',
linkUrl: 'https://www.github.com/',
webpUrl: 'img/2.webp',
alt: 'image 2',
title: 'image 2'
},
'img/3.png',
{
imageUrl: 'img/4.jpg',
linkUrl: 'https://www.github.com',
linkNewTab: true,
alt: 'image 4'
},
'img/5.jpg',
{
imageUrl: 'img/6.jpg',
textTitle: 'Hello World!',
textBody: 'This is some body text for the slide.',
textPosition: 'NW',
webpUrl: 'img/6.webp'
}
]
};Images can be declared either by the options.images array or by images placed inside the container div:
images: [
'img/1.jpg',
'img/2.jpg',
'img/3.jpg'
]<div id='slider-1'>
<img src='img/1.jpg'>
<img src='img/2.jpg'>
<img src='img/3.jpg'>
</div>Images can have links associated with them. These links have the option of opening in a new tab. These can be declared either by properties in the options.images array or by anchor tags placed inside the container div:
images: [
'img/1.jpg',
{
imageUrl: 'img/1.jpg',
linkUrl: 'https://www.github.com/'
},
{
imageUrl: 'img/2.jpg',
linkUrl: 'https://www.github.com/'
linkNewTab: true
}
]<div id='slider-1'>
<img src='img/1.jpg'>
<a href='https://www.github.com'>
<img src='img/2.jpg'>
</a>
<a href='https://www.github.com' target='_blank'>
<img src='img/2.jpg'>
</a>
</div>Images can have a text overlay that appears when the slide is active. This is overridden by static text if present. This text can be positioned in any of the four corners of the slide (default is bottom-left). This can be declared either by properties in the options.images array or by attributes on img tags inside the container div:
images: [
'img/1.jpg',
{
imageUrl: 'img/2.jpg',
textTitle: 'Title1',
textPosition: 'NE'
},
{
imageUrl: 'img/3.jpg',
textTitle: 'Title2',
textBody: 'This is the text for slide 2.'
}
]<div id='slider-1'>
<img src='img/1.jpg'>
<img src='img/2.jpg' text-title='Title1' text-position='NE'>
<img src='img/3.jpg' text-title='Title2' text-body='This is the text for slide 2.'>
</div>Images can have the default img attributes alt and title (for accessibility, etc.) This can be declared either by properties in the options.images array or by attributes on img tags inside the container div:
images: [
{
imageUrl: 'img/2.jpg',
alt: 'image 2',
title: 'image 2'
},
{
imageUrl: 'img/3.jpg',
alt: 'image 3',
title: 'image 3'
}
]<div id='slider-1'>
<img src='img/2.jpg' alt='image 2' title='image 2'>
<img src='img/3.jpg' alt='image 3' title='image 3'>
</div>VanillaSlider offers WebP support (next-gen optimized image format). If options.webp is true, the slider will check if the browser supports the WebP image format, and use the WebP url for the image source if available. The WebP URL can be declared either by webpUrl in the options.images array or by the webp-url attribute on img tags inside the container div:
images: [
{
imageUrl: 'img/1.jpg',
webpUrl: 'img/1.webp'
},
{
imageUrl: 'img/2.jpg',
webpUrl: 'img/2.webp'
},
{
imageUrl: 'img/3.jpg',
webpUrl: 'img/3.webp'
}
]<div id='slider-1'>
<img src='img/1.jpg' webp-url='img/1.webp'>
<img src='img/2.jpg' webp-url='img/2.webp'>
<img src='img/3.jpg' webp-url='img/3.webp'>
</div>Get the index of the next slide.
console.log(slider.getNextIndex());
// output:
// 1Get the index of the previous slide.
console.log(slider.getPrevIndex());
// output:
// 3Go to the next slide, then call an optional callback.
slider.nextSlide(() => { console.log('moved to next slide'); });
// output:
// moved to next slideGo to the previous slide, then call an optional callback.
slider.prevSlide(() => { console.log('moved to previous slide'); });
// output:
// moved to previous slideGo to the slide at the indicated index, then call an optional callback.
slider.goToSlide(2, () => { console.log('moved to slide at index 2'); });
// output:
// moved to slide at index 2Begin automatic slide movement.
slider.startAuto();
// starts auto slide movementPause automatic slide movement until slides move manually.
slider.pauseAuto();
// pauses auto slide movement until slides move Stop automatic slide movement.
slider.stopAuto();
// stops auto slide movementProperties can be accessed after the VanillaSlider has been instantiated:
console.log(slider.containerId);
// slider-1
console.log(slider);
// VanillaSlider {...}Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.