The TMDb Movie Carousel script is designed to fetch trending movies from the TMDb (The Movie Database) API and display them in a responsive carousel on an HTML page. The script utilizes the Swiper library for carousel functionality.
To use this script, follow these steps:
- Include the script file in your HTML document.
- Set up the necessary configurations using the
setOptionsfunction.
This function sets up the options for the TMDb object.
options(object): An object containing the following properties:apiKey(string): TMDb API key.endpoint(string): API endpoint.targetId(string): HTML element ID where the carousel will be rendered.
This function fetches trending movies from the TMDb API using the configured options.
This function renders the movie carousel on the specified HTML element. It sets up the Swiper library, fetches movie data, generates HTML templates, and initializes the carousel.
This function generates an HTML template for an individual movie based on the provided movie object.
movie(object): Movie object containing details.
This function generates an HTML template for the entire movie carousel using the provided HTML elements for each movie.
elements(string): HTML elements for each movie.
This function adds custom styles to the head of the HTML document. It includes styles for the carousel, movie container, and other relevant elements.
This function dynamically loads the Swiper library by adding the required stylesheet and script tags to the head of the HTML document.
This function initializes the Swiper carousel with specified configurations.
- Swiper: A modern touch slider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>TMDb Movie Carousel</title>
</head>
<body>
<div id="tmdb"></div>
<script src="tmdb-movie-carousel.js"></script>
<script>
tmdb.setOptions({
apiKey: 'YOUR_TMDB_API_KEY',
endpoint: 'movie', // movie or tv
targetId: 'tmdb',
});
</script>
</body>
</html>Note: Replace 'YOUR_TMDB_API_KEY' with your actual TMDb API key.
This script is provided under the MIT License. See the LICENSE file for details.