Simple Svelte Slideshow

Demo page.

As the name suggests, it is a simple svelte slideshow. It uses the tweened store from "svelte/motion"

Get started

First install the slideshow

npm install simple-svelte-slideshow

Then on the top of your file you wish to use it add the following import statement

import SliderGalery from "simple-svelte-slideshow";

Finaly add the following component into you markup

<SliderGalery {imgArray} />

Options

The only required prop is imgArray which is an array of objects. The objects should have two properties:

• The src property which holds the image source/path
• And a text property which holds the image description (see example below)

// These are images in the public folder
let terre = "images/img_5terre_wide.jpg";
let lights = "images/img_lights_wide.jpg";
let mountains = "images/img_mountains_wide.jpg";
let nature = "images/img_nature_wide.jpg";
let snow = "images/img_snow_wide.jpg";
let woods = "images/img_woods_wide.jpg";
// imgArray is the name of the property
let imgArray = [
  { src: terre, text: "Cinque Terre" },
  { src: lights, text: "Northen Lights" },
  { src: mountains, text: "Mountains and fjords" },
  { src: nature, text: "Nature and sunrise" },
  { src: woods, text: "The Woods" },
  { src: snow, text: "Snowy Mountains" }
];

Now the imgArray should be passed as a prop into the component

<SliderGalery {imgArray} />

And you are good to go.

There are three more optional properties:

1. delay
2. duration
3. easingMethod

delay is set to zero by default. The duration of the animations defaults to 1.5 seconds. For the easingMethod you can choose between five values:

• sineInOut

• cubicInOut,

• expoInOut,

• backInOut,

• elasticInOut

  For more information about these methods visit the following link

  Here is another example:

<script>
  import SliderGalery from "simple-svelte-slideshow";

  // These are in the public folder
  let terre = "images/img_5terre_wide.jpg";
  let lights = "images/img_lights_wide.jpg";
  let mountains = "images/img_mountains_wide.jpg";
  let nature = "images/img_nature_wide.jpg";
  let snow = "images/img_snow_wide.jpg";
  let woods = "images/img_woods_wide.jpg";
  let imgArray = [
    { src: terre, text: "Cinque Terre" },
    { src: lights, text: "Northen Lights" },
    { src: mountains, text: "Mountains and fjords" },
    { src: nature, text: "Nature and sunrise" },
    { src: woods, text: "The Woods" },
    { src: snow, text: "Snowy Mountains" }
  ];
  const easingMethod = "backInOut";
  const duration = 2000;
</script>

<main>
	<SliderGalery {imgArray} {duration} {easingMethod}/>
</main>

Happy coding...