How to create an image gallery in Svelte (carousel)

Introduction

In this article we will see how to create an image gallery in Svelte (carousel gallery) in a very simple way, creating your own component and without the need for external plugins or libraries.

Let’s go! 💃🏻

Create a new Svelte project

To create a project in Svelte, let’s remember, with the following command:

For the example I will call the project galeria-svelte:

Degit clones just the published git workspace and not the git repo.

Then, we only have to install the dependencies with yarn install or npm install (that’s your choice, I’ll use NPM).

Well. We already have our new project installed to create our awesome image gallery 🙃 If you run npm run dev you should see your project in

Well. We already have our new project installed to create our awesome image gallery galería de imágenes 🙃 If you run npm run dev you should see your project in http://localhost:5000/:

<Carousel /> Component

We are going to create our basic component to view our gallery, which we will call it Carousel:

As you can see, with export let images we are telling the component that we will props a variable (which will be an array of images) called images.

The html is very simple at the moment. We make a loop of the array of images that we receive by parameter and we put an image for each item.

And finally we give it a bit of style, to see all the images next to each other, and in the event that we have more images and they do not fit the width of the page, make us a horizontal scroll.

The complete Carousel.svelte would be as follows:

How can I use my <Carousel /> component?

To use a component in Svelte, as in other JavaScript frameworks is very very VERY easy. We import the component and call it as an html tag. Let’s see it with an example, for this we will edit the example src/App.svelte file that Svelte itself generates when creating the project.

We will leave it as follows:

As you can see, we import the component with import Carousel from './Carousel.svelte'; and we define an array of images with three attributes (path, id, alt). And we invoke the Carousel component passing it the array of images that we have defined previously:

If everything has worked correctly, surely it will 🕵🏻‍♂️, you should see our first image carousel:

Easy, right?

Parameterize the component

The grace of the components is that we may want to reuse them in other parts of the web, with different parameters and style, right? For example, in our case, we might want different image sizes for one gallery or another, or a separation between images, or both!

Go for it.

Variable image size in our gallery

We are going to define a new imageHeight parameter in our Carousel.svelte that will be the maximum size of the images:

And we pass it to the html in the following way:

Delete the height="100" property that we initially passed to it because now we are going to pass it to it dynamically. I add it to the style tag because then we will pass it another css property 🙃

And now we can create our galleries with different image sizes.

Image gallery with 200px height

Image gallery with 275px height

And of course you can reuse the component and put two galleries with different sizes:

Note that I have not passed the imageHeight property to the second Carousel, so it takes 150 by default, which is the default value declared in Carousel.svelte 🎉

Spacing between images

Let’s do another little configuration. We are going to separate the images from each other or not. For this we will use a new property called imageSpacing:

And we pass it to the html in the following way:

And now we can create our galleries with the images separated by the remaining pixels, for example:

Image gallery 140px high and 3px separated

As you will see, its configuration and use is very simple.

Final code

Finally the component should have been like this:

Repository in Github

Repo: https://github.com/alextomas80/galeria-imagenes-svelte

And that’s all. I hope it can serve you 😉

--

--

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