site_logiciels/components/Common/Carousel/Clients.vue

<!-- Carrousel des logos clients -->

<template>
  <LayoutContainer>
    <!-- Titre -->
    <v-row justify="center">
      <h3 class="text-center">
        <slot name="title">
          Plus de <span class="alt-color">5000 structures</span> nous font confiance
        </slot>
      </h3>
    </v-row>

    <v-container>
      <v-row>
        <!-- Fléche de gauche -->
        <v-btn
          v-if="lgAndUp"
          icon="fas fa-chevron-left"
          @click="goToPrevious"
        />

        <!-- Carrousel -->
        <Carousel
          ref="carousel"
          class="elevation-4 mb-12"
          :items-to-show="smAndUp ? 4 : 1"
          :items-to-scroll="smAndUp ? 2 : 1"
          :wrap-around="true"
        >
          <Slide v-for="(item, index) in items" :key="item.src">
            <div>
              <v-img :src="item.src" :alt="item.alt" />
            </div>
          </Slide>
        </Carousel>

        <!-- Fléche de droite -->
        <v-btn
          v-if="lgAndUp"
          icon="fas fa-chevron-right"
          @click="goToNext"
        />
      </v-row>

      <v-row v-if="mdAndDown">
        <v-btn
          icon="fas fa-chevron-left"
          @click="goToPrevious"
        />
        <v-btn
          icon="fas fa-chevron-right"
          @click="goToNext"
        />
      </v-row>
    </v-container>
  </LayoutContainer>
</template>

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

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

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

const props = defineProps({
  items: {
    type: Array as PropType<Array<{ src: string, alt: string }>>,
    required: true
  }
});

const goToPrevious = () => {
  carousel.value!.prev();
};

const goToNext = () => {
  carousel.value!.next();
};
</script>

<style scoped lang="scss">
.v-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}

h3 {
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: var(--on-primary-color);
  width: 50%;

  @media (max-width: 1240px) {
    width: 70%;
  }
}

.alt-color {
  color: var(--on-primary-color-alt) !important;
}

.v-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: transparent;
  color: var(--on-primary-color);
  border: 2px solid;
  border-color: var(--on-primary-color);
  cursor: pointer;
  margin-right: 1rem;
  margin-top: 1rem;
  border-radius: 0;
}

.carousel {
  width: 960px;
  height: 240px;
  background-color: var(--neutral-color);
  margin-top: 2rem;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--primary-color);

  @media (max-width: 1240px) {
    width: 50%;
    min-width: 600px;
  }

  @media (max-width: 1240px) {
    width: 90%;
    min-width: 90%;
  }
}

.v-img {
  height: 10rem;
  width: 10rem;
  margin: 2rem auto;
}
</style>