- add plugins to iife
- fix default options
- options.plugins: []
- fix unsnapped loop mode
- guard loop in mutate
- fix snap === 'deck'
- ix types
- fix
dom()
init - fix
snap
behaviour - add
scrollable
option - add reactive
position
- fix
axis: 'y'
behaviour - add
on:mutate
event & auto reinit - add
-webkit-user-select:none
css rule
- first release
- implement
groups
prop to control the number of items displayed per viewport
- implement
groups
prop to control the number of items displayed per viewport; - inherit
clamp
value by control buttons;
- decrease bundle size
window.Slidy
object contain@slidy/core
,@slidy/animation
,@slidy/easing
&@slidy/media
functions
window.Slidy = {
animation, // animation functions
core, // core function
easing, // easing functions
media, // global media store
};
- IIFE global name
window.SlidyMedia
- IIFE global name
window.SlidyAnimation
- IIFE global name
window.SlidyEasing
- first release
- add autoplay action
- add i18n localization script
- testing releases
- remove
browser
field for modern bundlers & CDN compatibility - remove
duration
fromto(index)
method
- fix window availability
- use generic for better DX https://github.com/Valexr/Slidy/commit/36ecdd8c086d18e0a72805de11b63fdcfd4b58f9
Simple, configurable, nested & reusable sliding action script with templates, animations, easings & some useful plugins.
Сompletely mimics the behavior of a native scroll with mouse drag, index navigation, acceleration, gravity & infinite loop mode.
- @slidy/core - Core sliding script
- @slidy/media - Observable media
- @slidy/easing - Easing functions
- @slidy/animation - Animation functions
- @slidy/svelte - SvelteJS template
- Demo docs site based on SvelteKit
- @slidy/react - ReactJS template
- @slidy/vue - VueJS template
- @slidy/wc - WebComponent template
- @slidy/malina - MalinaJS template
- @slidy/solid - SolidJS template
- fix index on stop;
- fix index limits;
- new option
immutable={true}
;
- new prop
options.sensity: 0.3
for next slidy scroll sensitivity;
- rename
slidyinit
toinit
, now it'strue
by default. Example;
keyExtractor()
nowkey()
& by default:
key = (item) => item.id || item[slide.imgsrckey];
Slides may not have id
's, but you must have imgsrckey
(by default
imgsrckey="src"
). Svelte needs some unique identifier for {#each}
loop.
You can customize key() in template instead:
<Slidy key="{(item) => uid()}" />
- Add
keyExtractor
props as function to customize svelte loop key. The default return value isitem.id
, defaults to array's index if there is no id key.
keyExtractor = (item, i) => item.id || i;
Tx @axmad386👍🏻 for PR & @tehnolog for issue
Usage example:
<Slidy keyExtractor="{(item, index) => item.id + index + uid()}" />
or
<Slidy keyExtractor="{(item) => item.id.toString()}" />
timeout
prop: 0Number
- set timeout toslidyinit: true
- like example time for spinner;- Named export
import { Slidy } from 'svelte-slidy';
andesbuild
bundler; <Spinner />
removed loader from tje core and replaced with custom slot<slot name="loader" />
;- Simplified sizes props initializion;
- Move
pannable.js
listeners to wrapnode; - Rename
resobserver.js
toresize.js
{ overflow: 'hidden' }
option;- Fully reactive Slidy for update slides in runtime;
- New block of options: { axis: 'x', loop: false, duration: 550 } in settings object;
- { loop: true/false } option;
- { objectfit: 'cover' } option;
- { align: 'middle', alignmargin: 50 } option;
- Slide now places in default slot,
<slot name="slide" />
was removed; - Add functionality for external slides control;
- External thumbs/dots navigation;
- Internal option shift + mousewheel functionality;
- New props names & settings;
- New classNames && slots in Slidy nodes tree;
- New settings for preloader;
- Axis Y direction;
- Classnames on state:
.loaded
– on init Slidy;.autowidth
– on slide.width: 'auto';.axisy
– on axis: 'y' direction;
- Keyboard arrowkeys navigation only Slidy in focus;
- "slide.backimg", "slide.imgsrckey", "slide.class" options, example;
- If you are using slot content and
slide.backimg
option: asfalse
you need to tag<img />
inside slot. By default empty slot have<img />
tag; - Rename directive property name
let:slide
tolet:item
;