Cómo crear una galería de imágenes en Svelte

Introducción

En este artículo veremos como crear una galería de imágenes en Svelte (carousel gallery) de una forma muy sencilla, creando tu propio componente y sin necesidad de plugins o librerías externas.

¡Así que vamos a empezar! 💃🏻

Crear un nuevo proyecto Svelte

Para crear un proyecto en Svelte, recordemos, con el siguiente comando:

Para el ejemplo voy a llamar el proyecto galeria-svelte:

Degit clona solo el espacio de trabajo publicado de git y no el repositorio.

Entonces, sólo nos queda instalar las dependencias con yarn install o npm install (eso ya a tu elección, yo usaré NPM).

Bien. Ya tenemos instalado nuestro nuevo proyecto para crear nuestra awesome galería de imágenes 🙃 Si ejecutas npm run dev deberías ver tu proyecto en http://localhost:5000/:

Componente <Carousel />

Vamos a crear nuestro componente básico para ver nuestra galería, que lo llamaremos Carousel:

Como verás, con export let images le estamos diciendo al componente que le enviaremos por props una variable (que será un array de imágenes) llamada images.

El html es muy sencillo de momento. Hacemos un loop del array de imágenes que recibimos por parámetro y ponemos una imagen para cada item.

Y finalmente le damos un poco de estilo, para ver todas las imágenes una al lado de la otra, y en el caso de que tengamos más imagenes y no entren en el ancho de la página, nos haga un scroll horizontal.

El Carousel.svelte completo quedaría de la siguiente forma:

¿Cómo puedo utilizar mi <Carousel />?

Para utilizar un componente en Svelte, como en otros frameworks de JavaScript es muy muy MUY fácil. Importamos el componente y lo llamamos como una etiqueta html. Vamos a verlo con un ejemplo, para ello editaremos el fichero src/App.svelte de ejemplo que nos genera el propio Svelte al crear el proyecto. Lo dejaremos de la siguiente forma:

Como verás, importamos el componente con import Carousel from './Carousel.svelte'; y definimos un array de imagenes con tres atributos (path, id, alt). E invocamos el componente Carousel pasándole el array de imágenes que nos hemos definido anteriormente:

Si todo ha funcionado correctamente, que seguro que sí 🕵🏻‍♂️, deberías de ver nuestro primer carousel de imágenes:

Fácil, ¿no?

Parametrizar el componente

La gracia de los componentes es que podemos querer reutilizarlos en otras partes de la web, con diferentes parámetros y estilo, ¿no? Por ejemplo, en nuestro caso, podríamos querer diferentes tamaños de imagen para una galería u otra, o bien una separación entre imágenes, ¡o ambas cosas! Vamos a ello.

Tamaño de imagen variable en nuestra galería

Vamos a definir un nuevo parámetro imageHeight en nuestro Carousel.svelte que será el tamaño máximo de las imágenes:

Y se lo pasamos al html de la siguiente forma:

Elimina la la propiedad height="100" que le pasábamos inicialmente porque ahora se lo vamos a pasar dinámicamente. Se lo añado a la etiqueta style porque luego le pasaremos otra propiedad css 🙃

Y ahora ya podemos crear nuestra galerías con diferentes tamaños de imagen.

Y por supuesto puedes reutilizar el componente y poner dos galería con diferentes tamaños:

Nota que al segundo Carousel no le he pasado la propiedad imageHeight, por lo que coge por defecto 150 que es el valor por defecto declarado en Carousel.svelte 🎉

Separación entre imágenes

Vamos a hacer otra pequeña configuración. Vamos a separar, o no, las imágenes entre sí. Para ello usaremos una nueva propiedad llamada imageSpacing:

Y se lo pasamos al html de la siguiente forma:

Y ahora ya podemos crear nuestra galerías con las imágenes separadas los pixels que quedamos, por ejemplo:

Cómo verás es muy sencillo su configuración y su uso.

Código final

Finalmente el componente debería haberte quedado así:

Repositorio en Github

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

Y esto es todo. Espero que te pueda servir 😉

--

--

alextomas.com

Love podcasts or audiobooks? Learn on the go with our new app.

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