Skip to content
Snippets Groups Projects
Commit 073a5029 authored by Juliette Kalflèche's avatar Juliette Kalflèche
Browse files

add slides with movies

parent 9de50d69
No related branches found
No related tags found
1 merge request!9front 2, le retour, début page home
This diff is collapsed.
...@@ -8,10 +8,13 @@ ...@@ -8,10 +8,13 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@splidejs/splide": "^4.0.6",
"@splidejs/vue-splide": "^0.6.6",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-router": "^4.0.3" "vue-router": "^4.0.3",
"vue3-carousel": "^0.1.40"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
......
<template> <template>
<div class="home"> <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> <h1>Bienvenue sur CaCaoCritics</h1>
<img class="logo" alt="Vue logo" src="../assets/logo.png" /> <img class="logo" alt="Vue logo" src="../assets/logo.png" />
<br /> <br />
...@@ -22,9 +35,17 @@ ...@@ -22,9 +35,17 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
export default { export default {
name: "Home", name: "Home",
components: {
Carousel,
Slide,
Pagination,
Navigation,
},
data: function () { data: function () {
return { return {
moviename: "", moviename: "",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment