Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@beyonk/svelte-carousel
Advanced tools
Readme
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.
This library is pure javascript, so can be used with any framework you like.
npm install
npm run dev # http://localhost:12001
npm i -D @beyonk/svelte-carousel
<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>
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;
}
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 greater 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. |
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:
<Carousel perPage={{ 800: 3, 500: 2 }}>
// will show 1 slide below 500px width, 2 at 500, 3 at 800.
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. |
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>
FAQs
Unknown package
The npm package @beyonk/svelte-carousel receives a total of 204 weekly downloads. As such, @beyonk/svelte-carousel popularity was classified as not popular.
We found that @beyonk/svelte-carousel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.