How to create an image gallery in Svelte (carousel)

Image for post
Image for post

Introduction

Create a new Svelte project

npx degit sveltejs/template <Nombre_del_proyecto>
npx degit sveltejs/template galeria-svelte
cd galeria-svelte
npm install
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

<Carousel /> Component

// Carousel.svelte
<script>
export let images;
</script>
<!-- Carousel.svelte -->
<div class="carousel">
<div class="carousel__container">
{#each images as image (image.id)}
<img src={image.path} alt={image.alt} id={image.id} height="100" />
{/each}
</div>
</div>
/* Carousel.svelte  */
<style>
.carousel {
display: flex;
overflow-x: auto;
position: relative;
width: 100%;
}
.carousel__container {
display: flex;
}
</style>
<script>
export let images;
</script><div class="carousel">
<div class="carousel__container">
{#each images as image (image.id)}
<img src={image.path} alt={image.alt} id={image.id} height="100" />
{/each}
</div>
</div><style>
.carousel {
display: flex;
overflow-x: auto;
position: relative;
width: 100%;
}
.carousel__container {
display: flex;
}
</style>

How can I use my <Carousel /> component?

<script>
import Carousel from './Carousel.svelte';
const images = [
{
path: 'https://picsum.photos/id/1012/3973/2639',
id: 'imagen-ejemplo-1',
alt: 'Atributo ALT de ejemplo para la imagen #1',
},
{
path: 'https://picsum.photos/id/1005/5760/3840',
id: 'imagen-ejemplo-2',
alt: 'Atributo ALT de ejemplo para la imagen #2',
},
{
path: 'https://picsum.photos/id/1020/4288/2848',
id: 'imagen-ejemplo-3',
alt: 'Atributo ALT de ejemplo para la imagen #3',
},
{
path: 'https://picsum.photos/id/1025/4951/3301',
id: 'imagen-ejemplo-4',
alt: 'Atributo ALT de ejemplo para la imagen #4',
},
{
path: 'https://picsum.photos/id/103/2592/1936',
id: 'imagen-ejemplo-5',
alt: 'Atributo ALT de ejemplo para la imagen #5',
},
{
path: 'https://picsum.photos/id/104/3840/2160',
id: 'imagen-ejemplo-6',
alt: 'Atributo ALT de ejemplo para la imagen #6',
},
];
</script><main>
<h2 class="item__title">Mi galería de ejemplo</h2>
<div class="item__gallery">
<Carousel {images} />
</div>
<p class="item__description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ipsum
possimus accusamus aut, assumenda fuga labore provident, non molestiae
recusandae harum, fugit neque nisi quos qui nulla. Non, quaerat officia.
</p>
</main><style>
main {
padding: 1em;
max-width: 800px;
margin: 0 auto;
}
</style>
<Carousel {images} />
Image for post
Image for post

Parameterize the component

Variable image size in our gallery

// ...
// Maximum default height of 150px
export let imageHeight = 150;
// ...
<!-- ... -->
<img
src={image.path}
alt={image.id}
id={image.id}
style={`height: ${imageHeight}px;`}
/>
<!-- ... -->

Image gallery with 200px height

<Carousel {images} imageHeight={200} />
Image for post
Image for post

Image gallery with 275px height

<Carousel {images} imageHeight={275} />
Image for post
Image for post
<Carousel {images} imageHeight={205} />
<Carousel {images} />
Image for post
Image for post

Spacing between images

// ...
// By default the images are not separated
export let imageSpacing = 0;
// ...
<!-- ... -->
<img
src={image.path}
alt={image.id}
id={image.id}
style={`height: ${imageHeight}px; margin-right: ${imageSpacing}px`}
/>
<!-- ... -->

Image gallery 140px high and 3px separated

<Carousel {images} imageHeight={140} imageSpacing={3} />
Image for post
Image for post

Final code

<script>
export let images;
export let imageHeight = 150;
export let imageSpacing = 0;
</script><div class="carousel">
<div class="carousel__container">
{#each images as image (image.id)}
<img
src={image.path}
alt={image.alt}
id={image.id}
style={`height: ${imageHeight}px; margin-right: ${imageSpacing}px`}
/>
{/each}
</div>
</div><style>
.carousel {
display: flex;
overflow-x: auto;
position: relative;
width: 100%;
}
.carousel__container {
display: flex;
}
</style>

Repository in Github

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store