site_logiciels/pages/poc.vue

<template>
  <Carousel>
    <Slide v-for="slide in carouselItems" :key="slide" :items-to-show="1">
      <v-row>
        <v-col cols="12">
          <v-img :src="slide.logo" class="logo ml-12" />
          <div
            class="description ml-12"
            style="text-align: justify"
            v-html="slide.description"
          ></div>
        </v-col>
      </v-row>
      <v-row class="image-row">
        <div
          class="background-rectangle"
          :style="{ backgroundColor: slide.color }"
        />
        <v-img :src="slide.image" class="image" />
      </v-row>
    </Slide>


    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

<script setup>
import { Carousel, Navigation, Pagination, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";

const carouselItems = ref([
  {
    logo: "/images/logo/logiciels/School-noir.png",
    description:
      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
    buttonClass: "btn-school",
    buttonClassMobile: "btn-school-mobile",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
    color: "rgba(32, 147, 190, 0.4)",
    link: "/opentalent_school",
    name: "Cindy Blanchard",
    school: "Conservatoire de Musique",
    status: "élève",
    avatar: "/images/carousel/school/avatar.png",
  },
  {
    logo: "/images/logo/logiciels/Artist-noir.png",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
    buttonClass: "btn-artist",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
    color: "rgba(250, 194, 10, 0.4)",
    link: "opentalent_artist",
    name: "Thierry Dupont ",
    school: "Orchestre d’harmonie",
    status: "Admin",
    avatar: "/images/carousel/artist/avatar.png",
  },
  {
    logo: "/images/logo/logiciels/Manager-noir.png",
    description: "La solution de mise en réseau des organisations culturelles.",
    buttonClass: "btn-manager",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
    color: "rgba(216, 5, 11, 0.4)",
    link: "opentalent_manager",
    name: "Marie Voisin",
    school: "Réseau d'organisations culturelles ",
    status: "ADMIN",
    avatar: "/images/carousel/manager/avatar.png",
  },
]);
</script>

<style>
.background-rectangle {
  position: absolute;
  width: 70%;
  height: 20rem;
  left: 72%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 200px 0px 0px 15rem;
  z-index: -1;

  /* ============= LOGO ===============  */
}
.carousel {
  height: 100vh;
}

.logo {
  width: 200px;
  height: 100px;
}

.desccription-md {
  width: 20rem;
  margin-top: 10px;
}

.carousel__slide {
  padding: 10px;
}

.carousel__prev,
.carousel__next {
  display: none;
}

.image {
  width: 20rem;
  height: 100%;
}
</style>