` with `display: contents`. #### Inherited custom properties More optimal way is to use cascade. All supported custom properties starts with `--slidy-`. For example, to recolor navigation controls, let the component inherit a `--slidy-nav-item-color` custom property from any parent: ```svelte ``` Or just pass a class with a set of custom properties: ```svelte ``` ## Slots ### `arrow` Customizes the content of the default arrow controls. ### `arrows` Provides a slot for custom arrow buttons. If the nodes are ` ` and the `data-step` attribute is present, the event listener is not needed. Just provide the values `-1` and `1` for `data-step` on custom buttons. Also, there are `grid-area` is present in the layout for this custom controls: `prev-slide` and `next-slide` respectively. ```svelte Show the previous slide Show the next slide ``` ### `default` Usually the default markup is not enough. The `default` slot solves this problem. To use custom slide markup slot expose each `slides` prop item as `let:item` directive. ```svelte

``` ### `nav-item` Provides a slot for custom pagination buttons. Slot receives optional `index` and `active` props for proper functionality. Custom navigation item should be a `` and have `data-index` attribute to function. Otherwise, control the component [externally](#external-controls). ```svelte ``` ### `overlay` Slot to display content overlaid content. It covers the slides area and can be customized by overriding the `.slidy-overlay`. For example, it is used to display the counter. ```svelte Share ``` ### `thumbnail` _Work in progress_ ## Events The component forwards custom events: | Name | Description | Event detail | | :-------- | :------------------------------- | :-----------------------------------: | | `destroy` | Component is destroyed. | `node` | | `index` | The current slide index changes. | `{ index: number, position: number }` | | `keys` | The key pressed on focus. | `event.code` | | `mount` | Component is mounted to the DOM. | `{ childs, options }` | | `move` | Navigation occurs. | `{ index: number, position: number }` | | `resize` | Component's dimentions changes. | `{ node, options }` | | `update` | Component's props changes. | `options` | ## i18n To modify all texts used in the component use pass the dictionary as `i18n` prop. For the sake of accessibility, it is recommended translating defaults: | Key | Default | Event detail | | :-------- | :------------------------------ | :-----------------------------------: | | `carousel`| "carousel" | `aria-label` of a root element. | | `counter` | "%s of %s" | `aria-label` of each slide as {slide number} of {slide length} | | `first` | "Go to the first slide" | `aria-label` of the first item at the navigation. | | `last` | "Go to the last slide" | `aria-label` of the last item at the navigation. | | `next` | "Go to the next slide" | `aria-label` of the arrow control. | | `play` | "Start autoplay" | `aria-label` of the autoplay control. | | `prev` | "Return back to previous slide" | `aria-label` of the arrow control. | | `slide` | "Slide" | `aria-roledescription` of each slide item. | | `slideN` | "Go to the slide %s" | `aria-label` of pagination of each slide item. | | `stop` | "Stop autoplay" | `aria-label` of the autoplay control. | ## Recipes ### External controls It is possible to control the navigation of the `Slidy` instance from the parent component via binding. There are two variables available to control the component externally: `index` and `position`. Declare the variables to hold the values and bind them to the instance for the carousel control. ```svelte (index += 1)}> Next slide (position += 50)}> Move ``` ## Possible issues - Slides should not have `absolute` positioning, otherwise the [core-package][] script won't get correct dimentions; - Using the `background` option usually is not recommended. In case you need to use it, specify the slide sizes with custom properties: `width` and `height`, or just `aspect-ratio`. ## License MIT © [EricRovell](https://github.com/EricRovell) [core-package]: https://github.com/Valexr/slidy/tree/master/packages/core [demo]: https://valexr.github.io/Slidy [npm]: https://www.npmjs.com/package/@slidy/svelte [repl]: https://svelte.dev/repl/de699aa1f8c04874b0402352ac93df96 [svelte-custom-props]: https://svelte.dev/docs#template-syntax-component-directives---style-props