<template> <div class="home"> <div class="carousel"> <carousel :items-to-show="5.5" autoplay=1300> <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" > <router-link :to="'/movie/'+ movie.id"> <img :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" /> </router-link> </slide> <template #addons> <navigation /> <pagination /> </template> </carousel> </div> <br /> <div class="corps"> <div class="type"> <MovieType /> </div> <div class="movie-affichage"> <li v-for="movie in movies" :key="movie.id"> <p class="name"> <h5 class="center"> {{ movie.title }}</h5> </p> <p class="film"> <router-link :to="'/movie/'+ movie.id"> <img :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" /> </router-link> </p> </li> </div> </div> </div> </template> <script> import axios from "axios"; import "vue3-carousel/dist/carousel.css"; import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel"; import MovieType from "../components/MovieType.vue"; const backendURL = process.env.VUE_APP_BACKEND_BASE_URL; export default { name: "Home", components: { Carousel, Slide, Pagination, Navigation, MovieType, }, data: function () { return { moviename: "", movies: [], moviesLoadingError: "", }; }, methods: { fetchMovies: function () { axios .get( backendURL + "/movies/popular/20", ) .then((response) => { this.movies = response.data; console.log(response.data) }) .catch((error) => { this.moviesLoadingError = "An error occured while e ing movies."; console.error(error); }); }, fetchGenres: function () { axios .get( backendURL + "/genres", ) .then((response) => { this.genres = response.data; console.log(response.data) }) .catch((error) => { this.genresLoadingError = "An error occured while e ing genres."; console.error(error); }); }, }, created() { this.fetchMovies(); this.fetchGenres(); }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .logo { max-width: 100px; } h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } .carousel { margin-top: 30px; margin-left: 5px; margin-right: 5px; } .film { display: flex; align-self: center; } .name { max-width: 200px; justify-content: center; align-items: center; background-color: #eaf2ef; } .corps { display: flex; } .center { text-align: center; } </style>