Как сделать карусель карт с ForEach через Bootstrap 5?

Question

[White_Wolf_DD]

В общем такое дело, что мне требуется сделать карусель на сайте выдуманного магазина.
Самим добавлять отдельные товары в карты не вариант, т.к. в будущем надо будет делать рекомендацию товаров пользователю. Поэтому надо, чтоб карточки добавлялись автоматически в карусель.
Есть страница "Просмотр товаров", в котором при добавлении нового товара, через БД добавляется карта продукта.
Вот фото :

Фото

При загрузке нового товара, остаётся прошлый и добавляется новый
Вот фото :

Фото

Вот код JSP файла

Код

<%@ 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>

Если через Bootstrap 5 это невозможно, прошу дать информацию о том, как это сделать, либо где искать эту информацию. В гугле пока ничего не нашёл.

Answer 1

[White_Wolf_DD]

Нашёл вариант решения.

Да его осуществления, требуется создать Servlet

Код сервлета

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";
    }

}

и в index написать код

Код индекса

<%@ 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 кнопок, но думаю это можно самим найти

Так-же для такого метода требуется создать класс Cover (добавляет в БД ID каждой фотографии, его path указан в моём случае на папку с картинками) в entity, и два сервлета, UploadServlet (Выводит с БД на сайт фотографии) и InsertFileServlet (Даёт Cover добавить фотографию в БД)

Для остальных я не буду давать коды, иначе придётся всю свой программу написать сюда. Надеюсь кому-то помог!)

Comments

[White_Wolf_DD]

При чтении кода, можно понять, что придётся добавлять новые сервлеты и классы)
Удачного кодинга)