cineclub-site/front/pages/index.vue

<template>
  <main>
    <h1 hidden>Page d'accueil</h1>
    <section class="section">
      <h2 class="title">La semaine prochaine</h2>
      <template v-if="firstFilm">
        <MovieCardFull :film="firstFilm" />
      </template>
    </section>
    <section v-if="nextFilms.length" class="section is-relative">
      <h2 class="title">Et après</h2>
      <swiper
        class="py-4"
        :loadtheme="false"
        :modules="modules"
        slides-per-view="auto"
        :space-between="52"
        center-insufficient-slides
        navigation
      >
        <swiper-slide v-for="film of nextFilms" :key="film.id">
          <MovieCardShort :film="film" class="block" />
        </swiper-slide>
      </swiper>
    </section>
  </main>
</template>

<script setup lang="ts">
import { Film } from "~/composables/types"
import { Swiper, SwiperSlide } from "swiper/vue"
import { Navigation } from "swiper"
import { SwiperModule } from "swiper/types"
import "swiper/css"
import "swiper/css/navigation"

const modules = ref<SwiperModule[]>([Navigation])

const films = ref<Film[]>()
films.value = ((await apiGet<Film[]>(`films/`)).data.value || []) as Film[]
const firstFilm = computed(() => films.value?.[0])
const nextFilms = computed(() => films.value?.slice(1))
</script>

<style lang="sass">
.swiper-button-disabled
  display: none
.swiper-button-prev, .swiper-button-next
  height: 100%
  top: 1.5rem
  color: $primary-dark
  &:hover
    color: $primary

  &:after
    z-index: 10
  &:before
    content: ""
    height: 100%
    min-width: 100px
    position: absolute
.swiper-button-prev:before
  background: linear-gradient(to right, $white-bis, transparent)
  left: -10px
.swiper-button-next:before
  background: linear-gradient(to right, transparent, $white-bis)
  right: -10px

.swiper-slide
  width: 500px
  height: auto
  > .block
    height: 100%
</style>