site_logiciels/components/Layout/Caroussel.vue

<template>
  <LayoutContainer>
    <v-carousel
      v-if="lgAndUp"
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      class="carousel"
      :hide-delimiter-background="true"
      :show-delimiters="false"
      :touch="true"
    >
      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <v-row>
          <v-col cols="6">
            <v-row class="align-start">
              <v-img class="logo-school" :src="item.logo"></v-img>
            </v-row>

            <v-row class="align-start">
              <p class="description">{{ item.description }}</p>
            </v-row>

            <v-row class="align-start">
              <v-btn :class="item.buttonClass">En savoir plus</v-btn>
            </v-row>
          </v-col>

          <v-col cols="6">
            <v-row class="justify-end">
              <div
                class="background-rectangle"
                :style="{ backgroundColor: item.color }"
              ></div>
              <v-card class="card" elevation="5">
                <v-img
                  class="profile-image"
                  src="/images/carousel/school/avatar.png"
                  alt="Profile Image"
                  contain
                  rounded
                ></v-img>
                <v-card-text>
                  <v-card-title class="name">Cindy Blanchard</v-card-title>
                  <p class="school">Conservatoire d'Anemasse</p>
                  <p class="status">Eleve</p>
                </v-card-text>
              </v-card>

              <v-img :src="item.image" class="image"></v-img>
            </v-row>
          </v-col>
        </v-row>
      </v-carousel-item>

      <div class="custom-controls">
        <div
          v-for="(item, index) in carouselItems"
          :key="index"
          :class="{ 'active-control': index === activeIndex }"
          @click="changeSlide(index)"
        ></div>
      </div>
    </v-carousel>
  </LayoutContainer>
</template>

<script setup>
import { useDisplay } from "vuetify";
const {lgAndUp } = useDisplay();

let activeIndex = ref(0); 

const changeSlide = (index) => {
  activeIndex.value = index;
};

const carouselItems = ref([
  {
    logo: "/images/carousel/school/school.png",
    description:
      "Pour les petits comme pour les grans établissements d’enseignement artistique.Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements...",
    buttonClass: "btn-school",
    image: "/images/carousel/school/Fille_School.png",
    color: "rgba(32, 147, 190, 0.4)",
  },
  {
    logo: "/images/carousel/artist/artist.png",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de cirque, théâtre et danse.Gérez votre activité avec un logiciel de gestion et communication au service de votre passion.",
    buttonClass: "btn-artist",
    image: "/images/carousel/artist/musician.png",
    color: "rgba(250, 194, 10, 0.4)",
  },
  {
    logo: "/images/carousel/manager/manager.png",
    description:
      "La solution de mise en réseau des organisations culturelles. Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
    buttonClass: "btn-manager",
    image: "/images/carousel/manager/fédération.png",
    color: "rgba(216, 5, 11, 0.4)",
  },
]);
</script>

<style scoped>
::v-deep .v-carousel__controls {
  display: none;
}

.carousel,
.v-carousel__item {
  height: 900% !important;
}

.card {
  height: 20%;
  width: 27%;
  border-radius: 1rem;
  margin-top: 1rem;
}

.profile-image {
  width: 40%;
  margin: auto;
  height: 12vh;
}

.name {
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 1vh;
  font-family: "Barlow";
  font-style: normal;
}
.school,
.status {
  text-align: center;
  font-size: 80%;
  color: #888888;
  margin-bottom: 1vh;
}

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

.align-start {
  align-items: flex-start;
}

.carousel {
  height: 100%;
  margin-top: 10vh;
}


.description {
  text-align: left;
  width: 30%;
  margin-bottom: 1rem;
}
.logo-school {
  max-width: 35vw;
  height: 25vh;
  margin-top: 10px;
  margin-bottom: 2vh;
}

.image {
  height: 35rem;
  margin-top: 6rem;
  right: 20%;
}

.description {
  text-align: left;
  margin-right: 9vw;
  margin-left: 7vw;
  width: 25vw;
}

.custom-controls {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.custom-controls div {
  width: 1vh;
  height: 1vh;
  border-radius: 50%;
  background-color: grey;
  cursor: pointer;
}

.custom-controls .active-control {
  background-color: #000;
  margin-right: 2rem;
}

.btn-school {
  background: rgba(32, 147, 190, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}

.btn-artist {
  background: rgba(250, 194, 10, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}

.btn-manager {
  background: rgba(216, 5, 11, 0.4);
  border-radius: 0.5rem;
  margin-left: 7vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}
</style>