Demo page.
As the name suggests, it is a simple svelte slideshow. It uses the tweened store from "svelte/motion"
First install the slideshow
npm install simple-svelte-slideshowThen 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} />The only required prop is imgArray which is an array of objects.
The objects should have two properties:
- The
srcproperty which holds the image source/path - And a
textproperty 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:
- delay
- duration
- easingMethod
delay is set to zero by default. The duration of the animations defaults to 1.5 seconds.
For the easingMethod the default it sineInOut. 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...