Skip to content
Alebat

CarouselBuilder

Es necesario utilizar la librería de Swiper Element, ya que la de vue, react, etc. Están descontinuadas.

  • Documentación oficial de Swiper: Swiper

Elementos necesarios

Constants

Primero necesitaremos crear las siguientes constantes en la carpeta constants

  • imageDefault.ts
export const IMAGEDEFAULT =
  "https://d1do84bsbaemip.cloudfront.net/wp-content/uploads/2023/09/01142857/banner-home-tech-05.jpg";
  • resolutions.ts
export const MOBILE_RESOLUTION = 1024;

Composables

  • useWindowResize.ts

Este composable, comprueba en que resolución se encuentra el usuario en tiempo real y ajusta el número de slides a mostrar en el carrusel

import { MOBILE_RESOLUTION } from "@/constants/resolutions";
const PADDING_MOBILE = 32;
const PADDING_DESKTOP = 256;


export function useWindowResize() {
  const slidesPerView = ref(window.innerWidth);


  const updateWindowSize = () => {
    const padding = ref(0);
    padding.value =
      window.innerWidth <= MOBILE_RESOLUTION ? PADDING_MOBILE : PADDING_DESKTOP;
    slidesPerView.value = (window.innerWidth - padding.value) / 4 / 100;
  };


  onMounted(() => {
    window.addEventListener("resize", updateWindowSize);
    updateWindowSize();
  });


  onUnmounted(() => {
    window.removeEventListener("resize", updateWindowSize);
  });


  return { slidesPerView };
}

Documentación de Componentes

CarouselBuilder.vue

Descripción

CarouselBuilder.vue es un componente que implementa un carrusel utilizando Swiper. Permite mostrar elementos en un carrusel con diversas configuraciones y funcionalidades, incluyendo modales para la reproducción de videos.

Props

  • carousel-item (Object, required): Contiene los elementos del carrusel.
  • navigation (Boolean, default: true): Muestra botones de navegación.
  • pagination (Boolean, default: true): Muestra las balas de paginación.
  • keyboard (Boolean, default: true): Habilita el control por teclado.
  • mousewheel (Boolean, default: true): Habilita el control por rueda de ratón.
  • padding-swiper (Number, default: 0): Padding del swiper.
  • height-swiper (Number, default: 18): Altura del swiper.
  • space-between (Number, default: 0): Espacio entre las diapositivas.
  • css-mode (Boolean, default: true): Habilita el modo CSS.
  • slides-perView (Number, required, default: 4.2): Número de diapositivas por vista.
  • grid-rows (Number, default: 1): Número de filas en modo grid.
  • border-radius (String, default: ‘0.625’): Radio de borde de las diapositivas.
  • active-modal (Boolean, default: false): Muestra el modal.
  • loop (Boolean, default: true): Habilita el loop.

Ejemplo de Uso

<section v-if="cards" class="container__white">
  <CarouselBuilder
    :carousel-item="cards"
    :slides-per-view="slidesPerView"
    :space-between="10"
    :height-swiper="24"
    :padding-swiper="1"
    :pagination="false"
    :active-modal="true"
    :loop="false"
  />
</section>

Flujo de Trabajo

  1. Importar y Registrar Swiper: El componente registra Swiper en su inicio.
import { register } from "swiper/element/bundle";


// Function to register the Swiper component
register();
  1. Definir Props: Se definen las props que configuran el comportamiento del carrusel. (excpliación de cada prop en la descripción de props)
  2. Mostrar Modal: Se maneja el estado showModal para mostrar o esconder el modal.
  3. Configuración de Swiper: El carrusel se configura mediante las props pasadas y se ajustan estilos mediante computed properties.
  4. Renderizado: Se renderiza el carrusel y los elementos individuales utilizando NuxtLinkMode.vue.

Estilos

El componente incluye estilos específicos para Swiper y el modal. Utiliza SCSS para definir estilos y variables. Ejemplo de estilos:

swiper-container::part(bullet-active) {
  background-color: map-get($map: $colors, $key: c-principal-color);
}
swiper-container::part(bullet) {
  background-color: var(--c-white);
}


swiper-container::part(button-next),
swiper-container::part(button-prev) {
  color: map-get($map: $colors, $key: c-principal-color);
  transition: map-get($map: $transitions, $key: t-button);


  &:hover {
    scale: 1.3;
  }
}

NuxtLinkMode.vue

Descripción

NuxtLinkMode.vue es un componente que se usa dentro de CarouselBuilder.vue para cada elemento del carrusel. Puede actuar como un enlace o activar un modal para reproducir videos.

Props

  • id (Number, optional): Identificador del elemento.
  • text (String, optional): Texto del elemento.
  • logo (Object, required): Logo del elemento.
  • url (String, optional): URL del enlace.
  • url-video-MP4 (Object, optional): URL del video en formato MP4.
  • url-video-WEBM (Object, optional): URL del video en formato WEBM.
  • background-image (Object, required): Imagen de fondo del elemento.
  • active-modal (Boolean, optional, default: false): Indica si se debe activar el modal.

Ejemplo de Uso

Este componente se usa internamente dentro de CarouselBuilder.vue y no se invoca directamente.

Flujo de Trabajo

  1. Definir Props: Se definen las props para el componente.
  2. Emitir Evento: Se emite el evento hideModal con las URLs de los videos cuando se hace click en el elemento.
  3. Renderizado Condicional: El renderizado depende del valor de activeModal. Si es true, el elemento actuará como un botón para abrir el modal. Si es false, actuará como un enlace (NuxtLink).

Estilos

El componente incluye estilos específicos para la presentación de los elementos del carrusel, utilizando SCSS.

Ejemplo Completo de Implementación

<template>


<script setup>
import { ref } from 'vue'
import CarouselBuilder from '@/components/CarouselBuilder.vue'


const cards = ref([
  {
    background-image: { url: 'background1.jpg' },
    logo: { url: 'logo1.png' },
    text: 'Card 1',
    url: 'https://example.com/1',
    url-video-MP4: { url: 'video1.mp4' },
    url-video-WEBM: { url: 'video1.webm' }
  },
  // Agregar más elementos según sea necesario
])


const slidesPerView = ref(4.2)
</script>
  <section v-if="cards" class="container__white">
    <CarouselBuilder
      :carousel-item="cards"
      :slides-per-view="slidesPerView"
      :space-between="10"
      :height-swiper="24"
      :padding-swiper="1"
      :pagination="false"
      :active-modal="true"
      :loop="false"


    />
  </section>
</template>


<style scoped>
.container__white {
  background-color: white;
}
</style>