Making the web svelter with SvelteKit

# Making the web Svelter with SvelteKit

### Part 3 - Your very first component!

[Back to part 2](part2_slides.html)
						---
						## Creating a site-wide component

- Non-page components in Svelte usually live in /src/lib/components
						- /src/lib is a special directory that Svelte knows how to reach via
							- import component from '$lib';
						- You, the developer decides the directory-structure within /src/lib
							- For small apps, a single "components" directory is sufficient
							- For larger apps, add related components to sub-directories
						---
						## Copy from +page.svelte

- We will start by copying everything from +page.svelte to a new file:
							- /src/lib/components/Slideshow.svelte
						- Rename the ***data*** variable to photo
						- Update the each-loop
						---
						## Slideshow.svelte

```svelte [4, 12, 48-50]
						<script>
							 import {onMount} from "svelte";

export let photos;

let intervalId = null;
							 let intervalMs = 10000;
							 let photoLength = 0;
							 let currentPhoto = 0;

onMount(() => {
								 photoLength = photos ? photos.length : 0;
								 setFirstPhoto();
							 });

function changePhoto() {
								 console.log("change photo: " + photoLength);
								 let nextPhoto = currentPhoto >= photoLength - 1 ? 0 : currentPhoto + 1;
								 console.log("currentPhoto: " + currentPhoto + " nextPhoto:" + nextPhoto);

if (document.getElementById("cf2")) {
									 document.getElementById("cf2").children[currentPhoto].classList.add("transparent");
									 document.getElementById("cf2").children[currentPhoto].classList.remove("zoom");
									 document.getElementById("cf2").children[nextPhoto].classList.remove("transparent");
									 document.getElementById("cf2").children[nextPhoto].classList.add("zoom");
								 }

currentPhoto = nextPhoto;
							 }

function setFirstPhoto() {
								 if (document.getElementById("cf2") && document.getElementById("cf2").children.length > 0) {
									 document.getElementById("cf2").children[0].classList.remove("transparent");
									 setTimeout(function () {
										 document.getElementById("cf2").children[0].classList.add("zoom");
									 }, 1000);
								 }

if (intervalId) {
									 clearInterval(intervalId);
								 }

intervalId = setInterval(changePhoto, intervalMs);
							 }
						 </script>

<div id="cf2">
							 {#each photos as photo}
								 <div class="photo transparent" style="background-image: url('/images/{photo.id}')"/>
							 {/each}
						 </div>

#cf2 div.transparent {
								 opacity: 0;
							 }

#cf2 div.photo {
								 position: absolute;
								 top: 0;
								 width: 100vw;
								 height: 80vh;
								 object-fit: cover;
								 transition: opacity 1s ease-in-out, transform 10s;
								 background-size: cover;
								 background-position: center;
							 }

:global(#cf2 div.zoom) {
								 transform: scale(1.2);
							 }
						 </style>
						```
						---
						## Strip-down +page.svelte

```svelte []
						<script>
							export let data;
						</script>

<style>

</style>
						```
						---
						## Import and use the Slideshow.svelte component

```svelte [2, 7]
						<script>
							import Slideshow from "$lib/components/Slideshow.svelte";

export let data;
						</script>

<style>

</style>
						```
						---
						## Onwards

[part 4](part4_slides.html)