A simple lightweight custom webcomponent apporach of an image slider, that can be integrated on a website.
If you want to use the pico slider in your project, you can install via the package manger of your choice.
pnpm i pico-slider
You can also just add the script tag to your website, and load pico slider from a cdn. Using the pico slider via cdn is recommended.
<script src="https://unpkg.com/pico-slider/dist/index.js" type="module" async defer></script>
After including your script into your project you can use the new custom tag created by the webcomponent
<pico-slider selected-index="0">
<img src="" alt="" title="" ... />
<img src="" alt="" title="" ... />
...
</pico-slider>
When you first create the custom tag the pico slider script might not have been loaded yet. Since the script is defered it might be available later in the loading process of the browser.
You can react to different states of your custom webcomponent with the customElements
property and the :defined
pseudoselector in css.
While not defined, the pico slider tag won't do anything special expect from sitting around on your page.
customElements.whenDefined('pico-slider').then(() => {
// pico-slider is now defined
});
pico-slider:not(:defined) {
display: none;
}
The Pico Slider component emits events that you can listen to. The currently emited events are:
- pico-slider.loading-progress
- pico-slider.finished-loading
- pico-slider.selected-index-change
You can easily listen to those events via a vanilla js event listener either on the document or the element itself.
document.addEventListener('pico-slider.loading-progress', ({ detail }) => {
console.log('loading progress', detail);
// do stuff
});
// Alternativley
const picoSlider = document.querySelector('pico-slider');
picoSlider.addEventListener('pico-slider.loading-progress', ({ detail }) => {
console.log('loading progress', detail);
// do stuff
});
Bear in mind that you might want to work with identifiers if you have more that one instance of the Pico Slider on your page.