¿Cómo crear un slider con diferentes imágenes para móvil, tablet y desktop?

¿Cómo crear un slider con diferentes imágenes para móvil, tablet y desktop?

La mayoría de webs y tiendas online empiezan con una imagen principal en la 'home' que va cambiando cada cierto tiempo, ¿te suena?

A este elemento se le conoce como 'slider' o carrusel

Las imágenes tienen una importancia muy grande a la hora de que una web tenga una presencia profesional.

Siempre aconsejo a mis clientes que si no pueden realizar imágenes originales de un fotógrafo por tiempo o coste, que usen bancos de imágenes.

✅ Si puede ser, que sean de pago o poco conocidas, paraevitar tener las mismas imágenes que otras webso incluso la competencia.

Como desarrolladores, lo que queremos hacer es que los gestores de los ecommerce tengan la mayor autonomía y versatilidad posible.

Que sea sencillo de configurar y también que sea robusto para que siempre mantenga una apariencia visual en armonía con el tema.

¿Qué características debe tener un slider?

Tenemos una serie de características globales que aplican a todo el slider, las cuales son:

  • Tamañoen los diferentes dispositivos
  • Tiempo detransiciónentre imágenes
  • Elemento que nos indique que es un slider:bulleto flechas
  • Overlay: color y opacidad

Cada slide tendrá una serie de características particulares:

  • Título
  • Descripción
  • Color del texto
  • Botón de call to action
  • Imágenes para móvil, tablet y desktop
  • Posición de estos elementos dentro de la imagen

Veamos cómo desarrollar un slider que soporte todas estas características para que sea gestionado por una persona no técnica, a través del CMS de Shopify.

▶️ Dale al PLAY y aprende cómo crear tu propio slider

¿Cómo crear un slider en Shopify con HTML, CSS, Liquid y Javascript?

Para este desarrollo nos vamos a apoyar en el que considero el mejor slider de Javascript Vanila que he utilizado hasta el momento:Swiperjs

☝️ DEFINAMOS ESTE CONCEPTO:
Swiper es uncarrusel de imágenes de código abiertoque se centra en la versión móvil, lo que hace que la experiencia táctil y transiciones sean lo más nativas posibles a las de un dispositivo móvil.

1. Necesitamos su librería

帕拉empezar,我们incluir拉librería de swiperjs

Utilizaremos el CDN, que es la manera más sencilla de hacerlo.

Swiperjs

2.包括uir el javascript

Tenemos que incluir el javascript y el css dentro de las etiquetasen nuestro ficherotheme.liquid

3. Crear en nuestro editor de código

Vamos a crear en nuestro editor de código un nuevo fichero dentro de la parte desectionsa la que llamaremosslider-swiper.liquid

Aquí es donde introduciremos todo el código necesario para crear este slider de imágenes.

Crear en nuestro editor de código

Antes de continuar, es importante entender qué son lassectionsen Shopify.

Son plantillas de código Liquid que tienen acceso a los mismosobjetos,etiquetasyfiltrosglobalesque otras plantillas, pero pueden ser de dos tipos diferentes:

  • Unasección estáticase puede incluir en varias plantillas, perosolo existe una instancia de esa sección.当您在做什么cuando se形成层配置uración de una sección estática en un lugar, ese cambio se aplicará a todos los demás lugares donde se incluye la sección. Por ejemplo secciones comunes de este tipo son el footer, el header, la sección de newsletter,... que si las modificas en una página te gustaría que se modificase en todas las páginas de la web.
  • Lassecciones dinámicasse pueden agregar a lapágina de inicio del tema únicamentey la configuración de estas serán accesibles automáticamente en el editor de temas con lo que definamos dentro de su{% schema %}.Se pueden agregar un máximo de 25 secciones dinámicas a la página de inicio desde el CMS donde pone "Add Section".
Secciones dinámicas

Además, las secciones tienen las siguientes características:

  • Las variables creadas fuera de las secciones no están disponibles dentro de las secciones y viceversa.
  • Las secciones no pueden incluir otras secciones.

Para poder explicar cómo funciona cada línea de código he realizado un vídeo explicativo en el que iré contando cómo funciona y explicando cada una de las líneas creadas.

Así vas a entender y adaptar el código si es necesario.

¿Tienes una idea de negocio?

Comienza a usar Shopify gratis, sin necesidad de ingresar los datos de tu tarjeta de crédito

4. Incluye el código en tu proyecto

Aquí tienes un repositorio de Github público donde podréis acceder al código e incluirlo directamente en vuestros proyectos.

Vemos que es un fichero que está compuesto aproximadamente por:

  • 180 líneas de CSS

    Laura Bonmatí Mendoza Acerca del autor: Laura Bonmatí Mendoza, Freelance con experiencia en el desarrollo de temas desde 0 y adaptación de otros temas de Shopify. Me siento feliz cuando puedo aportar valor y ayudar a las personas que están a mi alrededor.
Mapa de categorías:

¿Quieres abrir una tienda online?