svelte-tiny-slider
Version:
A lightweight unopinionated slider or carousel that gives you the tools you need to create the slider that fits your needs.
221 lines (220 loc) • 7.75 kB
TypeScript
/** @typedef {typeof __propDef.props} TinySliderProps */
/** @typedef {typeof __propDef.events} TinySliderEvents */
/** @typedef {typeof __propDef.slots} TinySliderSlots */
export default class TinySlider extends SvelteComponent<{
/**
* The size of gap between elements, as any valid css value.
*/
gap?: string | undefined;
/**
* Whether to always fill the full width of the container when reaching the end of the slider.
*/
fill?: boolean | undefined;
/**
* The duration of the transition when sliding.
*/
transitionDuration?: number | undefined;
/**
* The threshold in pixels at which to move to the next/previous item after dragging. For example, a threshold of 10 means you need to move 10 pixels before the slider moves. Any less and the slider will revert back to the current item.
*/
threshold?: number | undefined;
/**
* The index of the currently shown slide.
*/
currentIndex?: number | undefined;
/**
* An array of all indexes that have been shown.
*/
shown?: number[] | undefined;
/**
* The width of the slider in pixels.
*/
sliderWidth?: number | undefined;
/**
* The current scroll position in pixels.
*/
currentScrollPosition?: number | undefined;
/**
* The added up width of all items in the slider. The innerwidth of the slider content.
*/
maxWidth?: number | undefined;
/**
* Indicates whether the end of the slider has been reached.
*/
reachedEnd?: boolean | undefined;
/**
* The distance to the end of the slider in pixels.
*/
distanceToEnd?: number | undefined;
/**
* Whether or not the user can swipe using their scroll wheel horizontally, most likely using a touchpad on a laptop.
*/
allowWheel?: boolean | undefined;
/**
* A callback function triggered when the slider reaches the end.
*/
end?: (() => void) | undefined;
/**
* A callback function triggered when the slider changes.
*/
change?: ((index: number) => void) | undefined;
/**
* The children elements of the slider.
*/
children?: import("svelte").Snippet<[any]> | undefined;
/**
* The controls for the slider.
*/
controls?: import("svelte").Snippet<[any]> | undefined;
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
constructor(options?: import("svelte").ComponentConstructorOptions<{
/**
* The size of gap between elements, as any valid css value.
*/
gap?: string | undefined;
/**
* Whether to always fill the full width of the container when reaching the end of the slider.
*/
fill?: boolean | undefined;
/**
* The duration of the transition when sliding.
*/
transitionDuration?: number | undefined;
/**
* The threshold in pixels at which to move to the next/previous item after dragging. For example, a threshold of 10 means you need to move 10 pixels before the slider moves. Any less and the slider will revert back to the current item.
*/
threshold?: number | undefined;
/**
* The index of the currently shown slide.
*/
currentIndex?: number | undefined;
/**
* An array of all indexes that have been shown.
*/
shown?: number[] | undefined;
/**
* The width of the slider in pixels.
*/
sliderWidth?: number | undefined;
/**
* The current scroll position in pixels.
*/
currentScrollPosition?: number | undefined;
/**
* The added up width of all items in the slider. The innerwidth of the slider content.
*/
maxWidth?: number | undefined;
/**
* Indicates whether the end of the slider has been reached.
*/
reachedEnd?: boolean | undefined;
/**
* The distance to the end of the slider in pixels.
*/
distanceToEnd?: number | undefined;
/**
* Whether or not the user can swipe using their scroll wheel horizontally, most likely using a touchpad on a laptop.
*/
allowWheel?: boolean | undefined;
/**
* A callback function triggered when the slider reaches the end.
*/
end?: (() => void) | undefined;
/**
* A callback function triggered when the slider changes.
*/
change?: ((index: number) => void) | undefined;
/**
* The children elements of the slider.
*/
children?: import("svelte").Snippet<[any]> | undefined;
/**
* The controls for the slider.
*/
controls?: import("svelte").Snippet<[any]> | undefined;
}>);
$$bindings: "currentIndex" | "shown" | "sliderWidth" | "currentScrollPosition" | "maxWidth" | "reachedEnd" | "distanceToEnd";
get setIndex(): any;
}
export type TinySliderProps = typeof __propDef.props;
export type TinySliderEvents = typeof __propDef.events;
export type TinySliderSlots = typeof __propDef.slots;
import { SvelteComponent } from "svelte";
declare const __propDef: {
/**
* @returns {void}
*/
props: {
/**
* The size of gap between elements, as any valid css value.
*/
gap?: string | undefined;
/**
* Whether to always fill the full width of the container when reaching the end of the slider.
*/
fill?: boolean | undefined;
/**
* The duration of the transition when sliding.
*/
transitionDuration?: number | undefined;
/**
* The threshold in pixels at which to move to the next/previous item after dragging. For example, a threshold of 10 means you need to move 10 pixels before the slider moves. Any less and the slider will revert back to the current item.
*/
threshold?: number | undefined;
/**
* The index of the currently shown slide.
*/
currentIndex?: number | undefined;
/**
* An array of all indexes that have been shown.
*/
shown?: number[] | undefined;
/**
* The width of the slider in pixels.
*/
sliderWidth?: number | undefined;
/**
* The current scroll position in pixels.
*/
currentScrollPosition?: number | undefined;
/**
* The added up width of all items in the slider. The innerwidth of the slider content.
*/
maxWidth?: number | undefined;
/**
* Indicates whether the end of the slider has been reached.
*/
reachedEnd?: boolean | undefined;
/**
* The distance to the end of the slider in pixels.
*/
distanceToEnd?: number | undefined;
/**
* Whether or not the user can swipe using their scroll wheel horizontally, most likely using a touchpad on a laptop.
*/
allowWheel?: boolean | undefined;
/**
* A callback function triggered when the slider reaches the end.
*/
end?: (() => void) | undefined;
/**
* A callback function triggered when the slider changes.
*/
change?: ((index: number) => void) | undefined;
/**
* The children elements of the slider.
*/
children?: import("svelte").Snippet<[any]> | undefined;
/**
* The controls for the slider.
*/
controls?: import("svelte").Snippet<[any]> | undefined;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {};
};
export {};