From f7583210cf8cb1f71436e8fd07b40bb377538e3d Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Tue, 19 Jul 2022 04:17:24 +0200
Subject: [PATCH] feat [front]: swiper in index page

---
 front/package.json    |  1 +
 front/pages/index.vue | 15 ++++++++-------
 front/yarn.lock       | 20 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/front/package.json b/front/package.json
index 09bf151..a6a7cd5 100644
--- a/front/package.json
+++ b/front/package.json
@@ -12,6 +12,7 @@
     "bulma-list": "^1.1.4",
     "oh-vue-icons": "^1.0.0-rc3",
     "prettier": "^2.5.1",
+    "swiper": "^8.3.1",
     "typescript": "^4.6.2"
   },
   "devDependencies": {
diff --git a/front/pages/index.vue b/front/pages/index.vue
index 206905f..2600416 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -3,19 +3,20 @@
     <h2 class="title">La semaine prochaine</h2>
     <MovieCardFull :film="firstFilm" />
   </section>
-  <section class="section">
+  <section v-if="nextFilms.length" class="section">
     <h2 class="title">Et après</h2>
-    <MovieCardFull
-      v-for="film of nextFilms"
-      :key="film.id"
-      :film="film"
-      class="block"
-    />
+    <swiper class="w-5/6 ml-auto relative" :loadtheme="false">
+      <swiper-slide v-for="film of nextFilms" :key="film.id">
+        <MovieCardFull :film="film" class="block" />
+      </swiper-slide>
+    </swiper>
   </section>
 </template>
 
 <script setup lang="ts">
 import { Film } from "~/composables/types"
+import { Swiper, SwiperSlide } from "swiper/vue"
+import "swiper/css"
 
 const films = ref<Film[]>()
 films.value = (await apiGet<Film[]>(`films/`)).data.value
diff --git a/front/yarn.lock b/front/yarn.lock
index 2095b74..17e5a52 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1932,6 +1932,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
@@ -4851,6 +4858,11 @@ split-on-first@^1.0.0:
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
   integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -4968,6 +4980,14 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.3.1.tgz#ad744c38b86b48c2207d169807e995e70cbce6be"
+  integrity sha512-oASYsulsERlbQVTZ8FjlTDJSN4YZwhp+AkvepOj8EOhgpvxzKoMpWpBPrk7ypkMioQUx6x2NPvkRU0Qv9mpS0A==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 table@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"