Carousel Component
General Information
- Carousels are generated through a svelte
Carouselcomponent, which can be imported by including the following line in the file's script tag:
import Carousel from '$lib/components/Carousel.svelte'; - The primary focus of the
Carouselcomponent is to generalize the control functions of a carousel, such that said functionality doesn't need to be re-implemented at every use of a carousel. The control functionality is implemented through a controller class, which coversnext,previous,resetandslide renderingactions. Additionally, autoplay is supported. - The component makes use of the
display: contentscss property such that the user can place the carousel's elements onto the parent's grid. Furthermore, an effort has been made to cover for the shortcomings of usingdisplay: contents, such as a lack of inheriting grid gaps and other miscellaneous properties. The carousel's sub-components are to be defined through svelte 5'sSnippetsyntax, of which examples will be included in the examples section. - The
Carouselcomponent has two parameters through which the carousel can be configured.data: An array with (typed) data that needs to be shown, where each index corresponds to a slide in the carousel.autoplay: Sets an interval in milliseconds that automatically makes the carousel proceed to the next slide (default 0). Autoplay is disabled if no autoplay value is given, or the interval is equal to zero. Furthermore, the timer will be reset when the user manually clicks on one of the carousel's navigation buttons.
- Furthermore, several snippets need to be provided through which components of the carousel
can be rendered. These snippets are to be included within the body of the
Carouseltags, such that it is ensured that the type of the data and the type passed on to the slide snippet are equivalent.slide(data): A snippet with a one input that renders the slide's data in the desired format.previous(): A snippet that renders the previous button.next(): A snippet that renders the next button.navigationContainer(previous, next)(optional): A snippet with two parameters that renders the previous and next buttons in the desired layout.
Examples
Basic setup
As noted in the general information, the data to be shown in the carousel needs to be passed
on to the Carousel component (in this case through the variable slideData). On top of that, all elements within the carousel component are placed
directly onto the parent's grid. Finally, the snippets used to render the content in the
carousel are put within the body of the Carousel, which automatically assigns
them to the appropriate parameters of the component.
<Carousel data={slideData}>
{#snippet slide(data)}
<h2>{data.title}</h2>
<p>{data.description}</p>
{/snippet}
{#snippet previous()}
<p class="previous button-link">🡠</p>
{/snippet}
{#snippet next()}
<p class="next button-link">🡢</p>
{/snippet}
</Carousel>
Custom navigation bar layout
The setup of the carousel shown below is identical to that of the previous example, with two differences: the navigation buttons have been placed in their own container and a five second autoplay interval has been added to the carousel. The inclusion of a navigation container allows for a different layout to be used to place the navigation buttons, with custom styling—in this case, a flex box is used with a border.
<Carousel data={slideData} autoplay={5000}>
{#snippet slide(data)}
<h2>{data.title}</h2>
<p>{data.description}</p>
{/snippet}
{#snippet previous()}
<p class="previous button-link">🡠</p>
{/snippet}
{#snippet next()}
<p class="next button-link">🡢</p>
{/snippet}
{#snippet navigationContainer(previous, next)}
<div class="navigation">
{@render previous()}
{@render next()}
</div>
{/snippet}
</Carousel>
Concrete example
Below is a (more complex) concrete example of how the Carousel component can be
used for slides that have elements spread over the parent node. Note however that this example
required a decent amount of styling overwrites through the :global() css directive.
Please refer to the stylesheet in the svelte file for further information on how to accomplish
the latter.
Proces begeleider
Dax
Hey allen, Ik wil me graag aan jullie voorstellen. Ik ben Dax en ben sinds juni werkzaam als procesbegeleider bij jullie. In mijn vrije tijd breng ik veel tijd door in de sportschool en op het voetbalveld als trainer. Daarnaast ben ik graag samen met mijn gezin en vrienden. We zien elkaar snel. Dan is er daarna genoeg tijd om elkaar persoonlijk te leren kennen.
Andy
Hey hey! Mijn naam is Andy. Ik ben begonnen als Multimedia begeleider, en nu procesbegeleider bij Spectrum! Gamedesign en illustratie zijn mijn grootste passies. Ik hou enorm van films en games en gebruik deze altijd als inspiratie bij mijn persoonlijke werk. Ik hou erg van de natuur en dieren en ga graag lekker wandelen. Ben altijd in voor een praatje, zeker wanneer het over nerdy dingen gaat!
Nick
Hoi! Ik ben Nick. Sinds 1 september 2022 ben ik werkzaam als procesbegeleider binnen Spectrum. Ik zet graag mijn vaardigheden en kwaliteiten in tijdens de begeleiding van de mediënten. Ik ben een avonturier en het liefst in het bos of in de sportschool te vinden. Daarnaast houd ik er ook van om gezellige activiteiten te ondernemen met mijn vriendin en vrienden