Image Carousel - Svelte
Clone repo
git clone https://github.com/bmw2621/svelte-carousel
Note that you will need to have Node.js installed.
Get started
Install the dependencies...
cd svelte-carousel
yarn
...then start Rollup:
yarn dev
Navigate to localhost:5000. You should see your app running.
See tutorial at https://www.youtube.com/watch?v=Ikgw-ybpTtY
Carousel
Carousel will expand to the full width of the containing element
Parameters
| parameter | default | usage |
|---|---|---|
| images | REQUIRED | Array of objects. Each must have a path attribute, with a string representing the path the the image, and an id attribute for the image element represented as a string |
| imageWidth | 300 | Integer representing width of all images in carousel. |
| imageSpacing | 20 | Integer representing number of pixels between each image. |
| speed | 500 | Integer representing number of milliseconds for transition to occur |
| controlColor | '#444' | String representing hex value or HTML color to color default controls |
| controlScale | '0.5' | String representation of float to determine size of default controls |
| displayControls | true | Boolean representing if controls should be available |
| autoplay | false | Boolean representing if autoplay should be turned on |
| autoplaySpeed | 5000 | Integer representing number of milliseconds between autoplay transitions |
Custom Controls - Slots
Custom controls may be passed in to the respective slots slot="left-control" and slot="right-control"
Example:
import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons';
<script>
const images = [
{path: 'images/image1.jpg', id: 'image1'},
{path: 'images/image2.jpg', id: 'image2'},
{path: 'images/image3.jpg', id: 'image3'},
{path: 'images/image4.jpg', id: 'image4'},
{path: 'images/image5.jpg', id: 'image5'}
]
</script>
<Carousel {images}>
<span slot="left-control"><ChevronLeftIcon /></span>
<span slot="right-control"><ChevronRightIcon /></span>
</Carousel>
