@expressive-wc/slide-show v0.1.1

\

Installation

As NPM package

npm install --save @expressive-wc/slide-show

import SlideShow from '@expressive-wc/slide-show/slide-show.js'

As html script

unpkg

<script type="module" src="https://unpkg.com/@expressive-wc/slide-show@0.0.7/dist/slide-show_0.0.7.min.js" integrity="sha384-x7wnLEKARE0k4q1cttqoD8Uj6X2NVEB/1rT7d0UrY8MsyphbxngGS9Bs31F1Phwj" crossorigin="anonymous"></script>

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@expressive-wc/slide-show@0.0.7/dist/slide-show_0.0.7.min.js" integrity="sha256-eBq0lZtKEakRPQDWq0tVl4t3MrCSXnyqfyHsKGA9EYE=" crossorigin="anonymous"></script>

Usage

First, you'll need to set up the element and add some images to it. For the element, you can set an interval (in ms) that will be used to automatically transition slides.

For the images, besides the src you must set the index, which will be the order in which they'll transition.

<slide-show id="my-slide-show" interval="3000">
  <img src="..." index="0" alt="...">
  <img src="..." index="1" alt="...">
  <img src="..." index="2" alt="...">
  <img src="..." index="3" alt="...">
  <!-- ... -->
</slide-show>

It is important that you also give the element a height style and make the images so that they don't display (don't worry, the component will make them show when it loads). These settings will prevent layout jumps in your page.

slide-show#my-slide-show {
  height: 300px;
}

slide-show#my-slide-show > img {
  display: none;
}

Navigation Buttons

You can set css variables to customize the appearance of navigation buttons, giving them a background color and (optionally) background images.

slide-show#my-slide-show {
  --slide-show-nav-button-bg: #AAAAAA;
  --slide-show-previous-icon: url(arrow-left.svg);
  --slide-show-next-icon: url(arrow-right.svg)
}

Slide buttons

Similarly, you can style the slides button that will appear at the bottom and allow users to switch to a specific image.

slide-show#my-slide-show {
  --slide-show-select-button-bg: #777777;
  --slide-show-active-button-bg: #DDDDDD;
}

Border radius

Provide a border radius to the images.

slide-show#my-slide-show {
  --slide-show-img-border-radius: 0.25rem;
}

Final result