add slides with movies

frontend/package.json

@@ -8,10 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@splidejs/splide": "^4.0.6",
+    "@splidejs/vue-splide": "^0.6.6",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vue3-carousel": "^0.1.40"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

frontend/src/views/Home.vue

 <template>
   <div class="home">
+   <carousel :items-to-show="5.5" autoplay=1300 >
+    <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
+        <img
+          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+          withd="100"
+          height="300"
+        />
+    </slide>
+    <template #addons>
+      <navigation />
+      <pagination />
+    </template>
+  </carousel>
     <h1>Bienvenue sur CaCaoCritics</h1>
     <img class="logo" alt="Vue logo" src="../assets/logo.png" />
     <br />
@@ -22,9 +35,17 @@
 
 <script>
 import axios from "axios";
+import 'vue3-carousel/dist/carousel.css';
+import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
 
 export default {
   name: "Home",
+  components: {
+    Carousel,
+    Slide,
+    Pagination,
+    Navigation,
+  },
   data: function () {
     return {
       moviename: "",