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, Ref } from "vue";
import type { Functionality } from "~/types/interface";

const { lgAndUp, mdAndUp, smAndUp } = useDisplay();

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: 0 10% 14px 10%;

  .v-img {
    width: 5rem;
    height: 3rem;
    margin-top: 1rem;
    margin-bottom: 12px;
    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: 0.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>