Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@beyonk/svelte-carousel

Package Overview
Dependencies
1
Maintainers
6
Versions
23
Issues
File Explorer

Advanced tools

@beyonk/svelte-carousel

<a href="https://beyonk.com"> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> </a>

    2.9.0latest
    GitHub

Version published
Maintainers
6
Weekly downloads
798
increased by9.02%

Weekly downloads

Readme

Source

js-standard-style CircleCI svelte-v2 svelte-v3

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:

AttributeTypeDefault ValueDescription
loopbooleantrueAt the end of the carousel, loop through to the first slide again, seamlessly
perPageinteger3Number of slides on a single page. Note that this needs to be greater than or equal to the number of slides in your carousel
autoplayinteger0Auto-change slide at an interval (in milliseconds). 0 means don't autoplay.
durationnumber200Slide transition duration in milliseconds.
easingstring'ease-out'It is like a CSS transition-timing-function — describes acceleration curve.
startIndexnumber0Index (zero-based) of the starting slide.
draggablebooleantrueUse dragging and touch swiping.
multipleDragbooleantrueAllow dragging to move multiple slides.
dotsbooleantrueToggles visibility of slider dots.
controlsbooleantrueToggles visibility of slider controls. dots.
thresholdnumber20Touch and mouse dragging threshold (in px).
rtlbooleanfalseEnables 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:

<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:

NameDataDescription
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

<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>

Keywords

FAQs

Last updated on 13 Jan 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc