feat [front]: remove slider in homepage
This commit is contained in:
parent
06b6282be8
commit
760c6f1342
1 changed files with 17 additions and 47 deletions
|
@ -9,33 +9,22 @@
|
||||||
</section>
|
</section>
|
||||||
<section v-if="nextFilms.length" class="section is-relative">
|
<section v-if="nextFilms.length" class="section is-relative">
|
||||||
<h2 class="title">Et après</h2>
|
<h2 class="title">Et après</h2>
|
||||||
<swiper
|
<div class="is-flex next-films">
|
||||||
class="py-4"
|
<MovieCardShort v-for="film of nextFilms" :key="film.id" :film="film" />
|
||||||
:loadtheme="false"
|
</div>
|
||||||
:modules="modules"
|
<div class="is-flex mt-5">
|
||||||
slides-per-view="auto"
|
<nuxt-link class="ml-auto" to="/calendrier?view=future">
|
||||||
:space-between="52"
|
Voir plus
|
||||||
center-insufficient-slides
|
</nuxt-link>
|
||||||
navigation
|
</div>
|
||||||
>
|
|
||||||
<swiper-slide v-for="film of nextFilms" :key="film.id">
|
|
||||||
<MovieCardShort :film="film" class="block" />
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Film } from "~/composables/types"
|
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"
|
|
||||||
|
|
||||||
useHead({ title: "Accueil" })
|
useHead({ title: "Accueil" })
|
||||||
const modules = ref<SwiperModule[]>([Navigation])
|
|
||||||
|
|
||||||
const films = ref<Film[]>()
|
const films = ref<Film[]>()
|
||||||
films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[]
|
films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[]
|
||||||
|
@ -44,32 +33,13 @@ const nextFilms = computed(() => films.value?.slice(1))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
.swiper-button-disabled
|
.next-films
|
||||||
display: none
|
flex-wrap: wrap
|
||||||
.swiper-button-prev, .swiper-button-next
|
justify-content: space-evenly
|
||||||
height: 100%
|
margin-bottom: -3rem
|
||||||
top: 1.5rem
|
> *
|
||||||
color: $primary-dark
|
flex: 0 0 31rem
|
||||||
&:hover
|
margin-bottom: 3rem
|
||||||
color: $primary
|
&:not(:last-child)
|
||||||
|
margin-right: 3rem
|
||||||
&: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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue