site_logiciels/components/Home/Caroussel.vue

<template>
  <LayoutContainer>

    <h1 class="title text-center"> LOGICIELS CULTURELS </h1>
    <h2 class="subtitle text-center">UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</h2>
    <!-- <v-carousel
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      :class="smAndDown ? 'carousel-sm' : 'carousel'"
      :hide-delimiter-background="true"
      :show-delimiters="false"
      :touch="true"
      :cycle= true
      :interval= 5000
    > -->
    <v-carousel
      ref="carousel"
      v-model="activeIndex"
      :show-arrows="false"
      :class="smAndDown ? 'carousel-sm' : '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 >
              <v-img
                v-if="!smAndDown"
                class="logo"
                :src="item.logo"
              />
            </v-row>

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

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

          <v-col cols="6">
            <v-row class="justify-end">
              <div
                class="background-rectangle"
                :style="{ backgroundColor: item.color }"
              />
              <v-card
                v-if="!smAndDown"
                class="card"
                elevation="5"
              >
                <v-img
                  class="profile-image"
                  :src="item.avatar"
                  alt="Profile Image"
                  contain
                  rounded
                />
                <v-card-text>
                  <v-card-title class="name">
                    {{ item.name }}
                  </v-card-title>
                  <p class="school">
                    {{ item.school }}
                  </p>
                  <p class="status">
                    {{ item.status }}
                  </p>
                </v-card-text>
              </v-card>

              <v-img
              :src="item.image"
                :class="smAndDown ? 'image-sm' : 'image'"

              />
            </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>
    </v-carousel>
  </LayoutContainer>
</template>

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

let activeIndex = ref(0);

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

const carouselItems = ref([
  {
    logo: "/images/logo/logiciels/School-noir.png",
    description:
      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique telle que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire. 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)",
    link: "/opentalent_school",
    name: "Cindy Blanchard",
    school: "Conservatoire d'Anemasse",
    status: "Eleve",
    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. Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion..",
    buttonClass: "btn-artist",
    image: "/images/carousel/artist/musician.png",
    color: "rgba(250, 194, 10, 0.4)",
    link: "opentalent_artist",
    name: "Thierry Dupont ",
    school: "Orchestre d’harmonie de Cluse",
    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. 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)",
    link: "opentalent_manager",
    name: "Marie Voisin",
    school: "Confédération Musicale de France",
    status: "ADMIN",
    avatar: "/images/carousel/manager/avatar.png",
  },
]);
</script>

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

/* ============= TITLE ===============  */
.title {
  font-size: 4rem;
  line-height: 3.5rem;
  letter-spacing: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}


.subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: .5rem;
  margin-bottom: 8rem;
}

/* ============= CARD ===============  */
.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;
}

/* ============= RECTANGLE ===============  */
.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 ===============  */}
.logo {
  max-width: 25vw;
  height: 25vh;
  margin-top: 10px;
}
.description {
  text-align: left;
  margin-right: 9vw;
  margin-left: 2vw;
  width: 25vw;
  margin-bottom: 1rem;
}

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

.image {
  height: 35rem;
  right: 5rem;
}


.custom-controls div {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background-color: grey;
  cursor: pointer;
  margin-bottom: .5rem;
}

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


/* ============= BUTTON ===============  */


.btn-school {
  background: rgba(32, 147, 190, 0.4);
}

.btn-artist {
  background: rgba(250, 194, 10, 0.4);
}

.btn-manager {
  background: rgba(216, 5, 11, 0.4);

}

.btn-school, .btn-artist, .btn-manager{
  border-radius: 0.5rem;
  margin-left: 2vw;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 15px;
  width: 10rem;
  height: 4rem;
  font-family: "Barlow";
  font-style: normal;
}

</style>