How to make a carousel of cards with ForEach via Bootstrap 5?

Question

Java

In general, such a thing is that I need to make a carousel on the website of a fictitious store.
Adding individual products to the cards by yourself is not an option, because. in the future, it will be necessary to make a recommendation of goods to the user. Therefore, it is necessary that the cards are added automatically to the carousel.
There is a "View Products" page, in which, when a new product is added, a product card is added through the database.
Here is a photo :

A photo

When uploading a new product, the previous one remains and a new one is added.
Here is a photo:

A photo

Here is the JSP code

The code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<h3 class="w-100 my-5 text-center">Список товаров</h3>
<div class="w-100 d-flex justify-content-center m-2">
    <c:forEach var="product" items="${listProducts}">
        <div class="card m-2" >
            <img src="insertCover/${product.cover.path}" class="card-img-top" alt="..." style="max-width: 12rem; max-height: 15rem; margin: 0 auto">
            <div class="card-body">
                <h5 class="card-title">${product.title} ${product.model}</h5>
                <p class="card-text">${product.price}</p>
                <a href="#" class="btn" style="background-color: #EB984E">Смотреть</a>
                <a href="buyProductForm" class="btn" style="background-color: #EB984E">Купить</a>
            </div>
        </div>
    </c:forEach>
</div>

If this is not possible through Bootstrap 5, please provide information on how to do this, or where to find this information. Haven't found anything on google yet.

Answer 1

Found a solution.
Yes its implementation, you need to create a Servlet

Servlet code

package servlets;

import entity.Product;
import jakarta.ejb.EJB;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import session.ProductFacade;

import java.io.IOException;
import java.util.List;

@WebServlet(name = "CarouselServlet", urlPatterns = {
        "/carousel",
})

public class CarouselServlet extends HttpServlet {

    @EJB
    private ProductFacade productFacade;

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        String path = request.getServletPath();
        switch (path) {
            case "/carousel":
                List<Product> listProducts = productFacade.findAll();
                request.setAttribute("listProducts", listProducts);
                request.getRequestDispatcher(LoginServlet.pathToFile.getString("index")).forward(request, response);
                break;
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

and write code in index

Index code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>

<p class="w-100 text-center my-5" style="font-size: 24px">Добро пожаловать в ""!</p>

<form action="carousel">
    <div class="ant-carousel">
        <div class="ant-carousel-hider">
            <ul class="ant-carousel-list">
                <c:forEach var="product" items="${listProducts}">
                    <li class="ant-carousel-element">
                        <div class="card m-2">
                            <img src="insertCover/${product.cover.path}" class="card-img-top" alt="..."
                                 style="max-width: 12rem; max-height: 15rem; margin: 0 auto">
                            <div class="card-body">
                                <h5 class="card-title">${product.title} ${product.model}</h5>
                                <p class="card-text">Цена: <strong>${product.price}€</strong></p>
                                <a href="#" class="btn btn-primary">Смотреть</a>
                                <a href="buyProductForm?productId=${product.id}" class="btn btn-primary">Купить</a>
                            </div>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div class="ant-carousel-arrow-left"></div>
        <div class="ant-carousel-arrow-right"></div>
        <div class="ant-carousel-dots"></div>
    </div>
</form>

Так-же тут есть стили и должен быть Javascript кнопок, но думаю это можно самим найти

Also, for such a method, it is required to create a Cover class (adds the ID of each photo to the database, its path is indicated in my case to a folder with pictures) in entity, and two servlets, UploadServlet (Outputs from the database to the photo site) and InsertFileServlet (Gives Cover add a photo to the database)
For the rest, I will not give codes, otherwise I will have to write my entire program here. Hope it helped someone!