carousel tom

Author: yomoxw

.gitignore

@@ -4,6 +4,7 @@
 .nitro
 .cache
 dist
+package-lock.json
 
 # Node dependencies
 node_modules

components/Carousel.vue

@@ -0,0 +1,93 @@
+<template>
+  <ClientOnly> 
+     <Carousel :settings="carrousel_settings"> 
+      <Slide
+        v-for="(item, index) in props.items"
+        :key="index"
+        class="carousel__slide"
+      >
+        <a :href="item.url" target="_blank">
+          <img :src="item.logo" class="carousel__item" />
+        </a>
+      </Slide> 
+      <template #addons>
+        <Navigation />  
+        <Pagination /> 
+     </template> 
+    </Carousel> 
+  </ClientOnly>
+</template>
+
+<script setup> 
+  import "vue3-carousel/dist/carousel.css"
+  import { Carousel, Slide, Navigation, Pagination } from "vue3-carousel"
+  import { useDisplay } from "vuetify"
+
+  const props = defineProps({
+   items: { type: Array, required: true },
+  })
+
+   const { name } = toRefs(useDisplay())
+   const nb_items_to_display = ref(3)
+watch(
+    name,
+    (value) => {
+       switch (value) {
+         case "xs": {
+           nb_items_to_display.value = 1
+          break
+       }
+        case "sm": {
+          nb_items_to_display.value = 2
+          break
+        }
+        default: {
+         nb_items_to_display.value = 3
+          break
+        }
+      }
+    },
+    {
+      immediate: true,
+    },
+   )  
+
+  const carrousel_settings = reactive({
+    autoplay: 2000,
+    itemsToShow: nb_items_to_display.value,
+    itemsToScroll: 1,
+    pauseAutoplayOnHover: true,
+    transition: 1000,
+    wrapAround: true,
+})
+
+  onMounted(() => {
+    console.log(carrousel_settings)
+  })
+</script>
+
+<style scoped>
+  .carousel__item {
+    min-height: 200px;
+    width: 100%;
+    background-color: var(--vc-clr-white);
+    color: var(--vc-clr-white);
+    font-size: 20px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  } 
+  .carousel__slide { 
+    display: flex;
+    padding: 15px;
+    align-items: center;
+    justify-content: center;
+  } 
+
+  .carousel__prev, 
+  .carousel__next {
+    box-sizing: content-box;
+    border: 5px solid red; 
+  } 
+</style> 

components/Loading.vue

@@ -17,8 +17,97 @@
             mdi-emoticon-excited-outline
           </v-icon>
           <br />
+          <Carousel :items="users_list"/>
         </v-card-text>
       </v-card>
     </v-col>
   </v-row>
 </template>
+
+
+<script setup>
+  import { useDisplay } from "vuetify"
+  import ying_yang from "@/assets/img/logos/ying yang.png"
+  import chemin from "@/assets/img/logos/chemin.png"
+  import vert from "@/assets/img/logos/vert.png"
+  import lampadaire from "@/assets/img/logos/lampadaire.png"
+  import collegue from "@/assets/img/logos/collegue.png"
+  import sobene from "@/assets/img/logos/sobene.png"
+  import etincelle from "@/assets/img/logos/etincelle.png"
+  import geste from "@/assets/img/logos/geste.png"
+  import socle from "@/assets/img/logos/socle.png"
+  import derniere from "@/assets/img/logos/derniere.png"
+  import salon from "@/assets/img/logos/salon.png"
+
+
+
+  import { loadFull } from "tsparticles"
+
+  const particlesInit = async (engine) => {
+    await loadFull(engine)
+  }
+
+  useHead({
+    titleTemplate: "OpenGeode - open source framework for geometric models",
+  })
+
+  const users_list = [
+    {
+      name: "YING YANG",
+      logo: ying_yang,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "CHEMIN",
+      logo: chemin,
+      // url: "https://www.ring-team.org",
+    },
+    {
+      name: "SOBRIETE ENERGETIQUE",
+      logo: sobene,
+      // url: "https://www.ring-team.org",
+    },
+    {
+      name: "VERT",
+      logo: vert,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "LAMPADAIRE",
+      logo: lampadaire,
+      // url: "https://www.bsc.es/",
+    },
+    {
+      name: "COLLEGUE",
+      logo: collegue,
+      // url: "https://www.bsc.es/",
+    },
+    {
+      name: "ETINCELLE",
+      logo: etincelle,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "GESTE",
+      logo: geste,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "SOCLE",
+      logo: socle,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "DERNIERE",
+      logo: derniere,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+    {
+      name: "SALON",
+      logo: salon,
+      // url: "https://www.nrcan.gc.ca/home",
+    },
+  ]
+
+  const { smAndUp } = useDisplay()
+</script>