Home.vue

<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" >
        <img
          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
          withd="100"
          height="300"
        />
    </slide>
    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
  </div>
    <br />
    <div class="corps">
  <div class="type">
    <MovieType />
  </div>
    <div class="film-name">Le film est : {{ moviename }}</div>
    <li v-for="movie in movies" :key="movie.id">
      <p class="movie-title">
        {{ movie.title }}
      </p>
      <p class="film">
        <img
          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
          withd="100"
          height="300"
        />
      </p>
    </li>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
import SearchBar from "../components/SearchBar.vue";
import MovieType from "../components/MovieType.vue";

export default {
  name: "Home",
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
    SearchBar,
    MovieType,
  },
  data: function () {
    return {
      moviename: "",
      movies: [],
      moviesLoadingError: "",
    };
  },
  methods: {
    fetchMovies: function () {
      axios
        .get(
          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
        )
        .then((response) => {
          this.movies = response.data.results;
        })
        .catch((error) => {
          this.moviesLoadingError = "An error occured while e ing movies.";
          console.error(error);
        });
    },
  },
  created() {
    this.fetchMovies();
  },
};
</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;
}

a {
  color: #ff68ad;
}
.carousel {
  margin-top: 30px;
  margin-left: 5px;
  margin-right: 5px;
}
.film {
  display:flex;
  align-self: center;
}
</style>