site_logiciels/components/Common/Carousel/Fonctionnalite.vue

<template>
  <LayoutContainer>
    <v-row class="center-90">
      <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="itemsToShow"
          :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 { lgAndUp, mdAndUp, smAndUp } = useDisplay();

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

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

const itemsToShow = computed(() => lgAndUp.value ? 5 : (mdAndUp.value ? 3 : (smAndUp.value ? 2 : 1)))


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);
  border: 2px solid;
  border-color: var(--on-primary-color);
  cursor: pointer;
  border-radius: 0;
  margin: 6px;
}

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

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
  width: 100%;
  height: 100%;
}

.v-card {
  border-radius: 1rem;
  transition: transform 0.3s;
  font-weight: 300;
  width: 100%;
  height: 100%;
  padding-bottom: 14px;

  .v-img {
    width: 5rem;
    height: 3rem;
    margin-top: 1rem;
    fill: #fac20a !important;
  }

  .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: var(--on-neutral-color);
  }

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

    p {
      text-align: left;
    }
  }
}

//@media (min-width: 1300px) and (max-width: 1800px){
//  .v-card{
//    min-height: 480px !important;
//    max-height: 480px !important;
//    min-width: 230px !important;
//    max-width: 230px !important;
//  }
//}
//
//@media (min-width: 1500px) and (max-width: 1800px){
//  .v-card{
//    min-height: 420px !important;
//    max-height: 420px !important;
//    min-width: 260px !important;
//    max-width: 260px !important;
//  }
//}
//
//@media (min-width: 1800px){
//  .v-card{
//    min-height: 400px !important;
//    max-height: 400px !important;
//    min-width: 300px !important;
//    max-width: 300px !important;
//  }
//}



</style>