site_logiciels/components/Common/Carousel/Fonctionnalite.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="6">
        <LayoutUISubTitle>
          Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
        </LayoutUISubTitle>

        <LayoutUITitle>
          Des fonctionnalités adaptées à vos besoins
        </LayoutUITitle>
      </v-col>

      <v-col cols="12" md="6" class="d-flex align-center justify-start">
        <v-btn icon="fas fa-chevron-left" @click="previousAction" />
        <v-btn icon="fas fa-chevron-right" @click="nextAction" />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" md="12">
        <Carousel
          ref="carousel"
          :items-to-show="4"
          :items-to-scroll="1"
          :wrap-around="true"
        >
          <Slide v-for="(card, index) in cards" :key="index" >
            <div class="card-container">
              <v-card class="inv-theme">
                <v-img
                  :src="card.logo"
                  :alt="card.title"
                  class="mx-auto"
                />

                <v-card-title>
                  <h5>
                    {{ card.title }}
                  </h5>
                </v-card-title>

                <v-card-item>
                  <v-card-text>
                    <ul>
                      <li
                        v-for="item in card.list"
                        :key="item"
                      >
                        <p>{{ item }}</p>
                      </li>
                    </ul>
                  </v-card-text>

                </v-card-item>
                <div class="footer">
                    <p
                      v-for="option in card.options"
                      :key="option"
                    >
                      {{ option }}
                    </p>
                  </div>
              </v-card>
            </div>
          </Slide>
        </Carousel>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from "vuetify";
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
import type { PropType } from "@vue/runtime-core";
import type { Functionality } from "~/types/interface";

const { mdAndDown } = useDisplay();

const props = defineProps({
  cards: {
    type: Array as PropType<Array<Functionality>>,
    required: true
  }
})

const carousel: Ref<typeof Carousel | null> = ref(null);

const nextAction = () => {
  carousel.value!.next();
};

const previousAction = () => {
  carousel.value!.prev();
};
</script>

<style scoped lang="scss">
.v-row {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.v-btn {
  width: 60px;
  height: 60px;
  background-color: transparent;
  //color: var(--on-primary-color);
  color: white;
  border: 2px solid var(--on-primary-color);
  cursor: pointer;
  border-radius: 0;
  margin: 6px;
}

.carousel {
  margin-left: 2rem;
  margin-right: 2rem;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
  margin-right: 2rem;
}

.v-card {
  border-radius: 1rem;
  transition: transform 0.3s;
  font-weight: 300;
  min-height: 25rem !important;

  .v-img {
    width: 5rem;
    height: 3rem;
    margin-top: 1rem;
  }

  .v-card-title {
    white-space: pre-wrap;
  }

  .v-card-item {
    text-align: left;
  }

  li {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.2rem;
    margin-bottom: 1rem;
    color: #000000;
  }

  .footer {
    position: absolute;
    left: 0;
    margin-left: .5rem;
    font-size: .9rem;
  }
}

@media(min-width: 1800px){
  .v-card{
    min-height: 400px !important;
    max-height: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
  }
}


</style>