@White_Wolf_DD

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

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

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


Вот код 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 это невозможно, прошу дать информацию о том, как это сделать, либо где искать эту информацию. В гугле пока ничего не нашёл.
  • Вопрос задан
  • 64 просмотра
Решения вопроса 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 добавить фотографию в БД)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы