Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beyonk-group/svelte-carousel
A super lightweight, super simple Carousel for Svelte 3
https://github.com/beyonk-group/svelte-carousel
beyonk carousel javascript siema slide slider svelte svelte-components svelte-v3 vanilla-js
Last synced: about 1 month ago
JSON representation
A super lightweight, super simple Carousel for Svelte 3
- Host: GitHub
- URL: https://github.com/beyonk-group/svelte-carousel
- Owner: beyonk-group
- License: mit
- Archived: true
- Created: 2018-08-28T18:03:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-05T10:16:15.000Z (over 2 years ago)
- Last Synced: 2024-04-13T18:11:45.099Z (8 months ago)
- Topics: beyonk, carousel, javascript, siema, slide, slider, svelte, svelte-components, svelte-v3, vanilla-js
- Language: Svelte
- Homepage:
- Size: 368 KB
- Stars: 213
- Watchers: 7
- Forks: 39
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - Svelte Carousel - Um carrossel leve e simples para o Svelte 3. (UI Componentes / Comunidade Global)
README
## This project is now archived. We don't use carousels any more, [and](https://powerdigitalmarketing.com/blog/why-you-should-not-use-a-carousel-on-your-website/#gref) [you](https://www.impactplus.com/blog/why-homepage-carousels-are-bad#:~:text=Carousels%20may%20seem%20flashy%20and,reflects%20badly%20on%20your%20brand.) [shouldn't](https://thegood.com/insights/ecommerce-image-carousels/) [either](https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/).
## Svelte Carousel
[](http://standardjs.com) [](https://circleci.com/gh/beyonk-adventures/svelte-carousel) [](https://v2.svelte.dev) [](https://svelte.dev)
Svelte Carousel / Slider
This is a ground-up rewrite of the original Svelte Carousel/Slider using Svelte v3, and [Siema](https://github.com/pawelgrzybek/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](https://svelte.dev/repl/3953567d530b41d087ab7eaa8e7e632a?version=3.22.3)
```
npm install
npm run dev # http://localhost:12001
```
### To use within a Svelte application:
```bash
npm i -D @beyonk/svelte-carousel
```
## Usage
```jsx
import Carousel from '@beyonk/svelte-carousel'
import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'
```
### 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.
```bash
npm i -D svelte-feather-icons
```
```jsx
...
import Carousel from './Carousel.svelte'
import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'
```
If you need to override height and width, you can use CSS:
```css
.control :global(svg) {
width: 100%;
height: 100%;
color: #fff;
border: 2px solid #fff;
border-radius: 32px;
}
```
#### Attributes
You can pass the following attributes:
| Attribute | Type | Default Value | Description |
|-----------|---------|---------------|------------------------------------------------------------------------------------------------------------------------------|
| loop | boolean | true | At the end of the carousel, loop through to the first slide again, seamlessly |
| perPage | integer | 3 | Number of slides on a single page. Note that this needs to be less than or equal to the number of slides in your carousel |
| autoplay | integer | 0 | Auto-change slide at an interval (in milliseconds). 0 means don't autoplay. |
| duration | number | 200 | Slide transition duration in milliseconds. |
| easing | string | 'ease-out' | It is like a CSS transition-timing-function — describes acceleration curve. |
| startIndex | number | 0 | Index (zero-based) of the starting slide. |
| draggable | boolean | true | Use dragging and touch swiping. |
| multipleDrag | boolean | true | Allow dragging to move multiple slides. |
| dots | boolean | true | Toggles visibility of slider dots.
| controls | boolean | true | Toggles visibility of slider controls. dots. |
| threshold | number | 20 | Touch and mouse dragging threshold (in px). |
| rtl | boolean | false | Enables layout for languages written from right to left (like Hebrew or Arabic). |
perPage can also be set to a responsive object, to change the number of slides based on screen width:
```jsx
// will show 1 slide below 500px width, 2 at 500, 3 at 800.
```
### Events
The Carousel components emits the following events:
| Name | Data | Description |
|----------|--------------------------------|--------------------------------------------------------------------------------|
| `change` | `{ currentSlide, slideCount }` | `currentSlide`: The current slide index. Can be a positive or negative integer. `slideCount`: The number of slides. |
### 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
```jsx
...
import Carousel from './Carousel.svelte'
let carousel;
function enter() {
carousel.pause();
}
function leave() {
carousel.resume();
}
```