beyonk-adventures / Svelte Carousel

Svelte Carousel

Svelte Carousel / Slider

This is a ground-up rewrite of the original Svelte Carousel/Slider using Svelte v3, and Siema, the goal being a fully working carousel with a tiny size.

Usage

This library is pure javascript, so can be used with any framework you like.

Demo

The simplest possible demo

npm install
npm run dev # http://localhost:12001

To use within a Svelte application:

npm i -D @beyonk/svelte-carousel

Usage

<Carousel>
  <div class="slide-content">Slide 1</div>
  <div class="slide-content">Slide 2</div>
  <div class="slide-content">Slide 3</div>
  <div class="slide-content">Slide 4</div>
</Carousel>

<script>
	import Carousel from '@beyonk/svelte-carousel'
	import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'
</script>

Options

Controls

You can set the controls to be anything you like, though the default height and width are set to 40px. Just use the slots available to insert your own content.

npm i -D svelte-feather-icons

<Carousel>
  <span class="control" slot="left-control">
    <ChevronLeftIcon />
  </span>
  <div class="slide-content">Slide 1</div>
  ...
  <div class="slide-content">Slide n</div>
  <span class="control" slot="right-control">
    <ChevronRightIcon />
  </span>
</Carousel>

<script>
	import Carousel from './Carousel.svelte'
	import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'
</script>

If you need to override height and width, you can use CSS:

	.control :global(svg) {
		width: 100%;
		height: 100%;
		color: #fff;
		border: 2px solid #fff;
		border-radius: 32px;
	}

Attributes

You can pass the following attributes:

perPage can also be set to a responsive object, to change the number of slides based on screen width:

<Carousel perPage={{ 800: 3, 500: 2 }}>
// will show 1 slide below 500px width, 2 at 500, 3 at 800.

Events

The Carousel components emits the following events:

Actions

You can call left, right, go(slideNumber), pause and resume functions on the slider. For example, for pausing the autoslide while the mouse is hover the carousel

<Carousel bind:this={carousel} on:mouseenter={enter} on:mouseleave={leave}>
<div class="slide-content">Slide 1</div>
...
<div class="slide-content">Slide n</div>
</Carousel>

<script>
import Carousel from './Carousel.svelte'
let carousel;

function enter() {
  carousel.pause();
}

function leave() {
  carousel.resume();
}
</script>