Untitled

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$Title$</title>
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/4.3.1/css/bootstrap.min.css"
          th:href="@{webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
    <script type="javascript" src="webjars/jquery/3.4.1/jquery.min.js"
            th:inline="javascript" th:src="@{webjars/jquery/3.4.1/jquery.min.js}"></script>
    <script type="javascript" src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"
            th:inline="javascript" th:src="@{webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" href="../static/css/main.css" th:href="@{/css/main.css}">
</head>

<body>
<div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" th:attr="data-ride='carousel'">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active" th:attr="data-slide-to=0,data-target='carouselExampleCaptions'" th:data-slide-to=0 th:data-target="'#carouselExampleCaptions'"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1" th:attr="data-slide-to=1,data-target='#carouselExampleCaptions'" th:data-slide-to=1 th:data-target="'#carouselExampleCaptions'"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2" th:attr="data-slide-to=2,data-target='#carouselExampleCaptions'" th:data-slide-to=2 th:data-target="'#carouselExampleCaptions'"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../static/images/code-4333398_1920.jpg" class="d-block w-100" alt="..." th:src="@{/images/code-4333398_1920.jpg}">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="../static/images/code_background.jpg" class="d-block w-100" alt="..." th:src="@{/images/code_background.jpg}">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Second slide label</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="../static/images/cloud-1910599_1920.png" class="d-block w-100" alt="..." th:src="@{/images/cloud-1910599_1920.png}">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev" th:attr="data-slide=${'prev'}">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next" th:attr="data-slide=${'next'}">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>
</html>