<div id="carousel-example-generic" class="ms-carousel carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li>
        <li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/car1.png" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/car2.jpg" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/paris.jpg" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a href="#carousel-example-generic" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary left carousel-control-prev" role="button" data-slide="prev"><i class="zmdi zmdi-chevron-left"></i></a>
    <a href="#carousel-example-generic" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary right carousel-control-next" role="button" data-slide="next"><i class="zmdi zmdi-chevron-right"></i></a>
</div>

<div id="carousel-example-generic4" class="ms-carousel ms-carousel-thumb carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators carousel-indicators-tumbs">
        <li data-bs-target="#carousel-example-generic4" data-bs-slide-to="0" class="active">
            <img class="" src="<%= assets %>/img/demo/car1-thumb.png" alt="">
        </li>
        <li data-bs-target="#carousel-example-generic4" data-bs-slide-to="1">
            <img class="" src="<%= assets %>/img/demo/car2-thumb.jpg" alt="">
        </li>
        <li data-bs-target="#carousel-example-generic4" data-bs-slide-to="2">
            <img class="" src="<%= assets %>/img/demo/paris-thumb.png" alt="">
        </li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/car1.png" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/car2.jpg" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="<%= assets %>/img/demo/paris.jpg" alt="...">
            <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>
</div>

<div id="carousel-example-generic5" class="ms-carousel ms-carousel-thumb carousel slide" data-bs-ride="carousel">
    <div class="card card-relative">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="<%= assets %>/img/demo/car2.jpg" alt="...">
                <div class="carousel-caption">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="<%= assets %>/img/demo/car1.png" alt="...">
                <div class="carousel-caption">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="<%= assets %>/img/demo/paris.jpg" alt="...">
                <div class="carousel-caption">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a href="#carousel-example-generic5" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary left carousel-control-prev" role="button" data-slide="prev"><i class="zmdi zmdi-chevron-left"></i></a>
        <a href="#carousel-example-generic5" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary right carousel-control-next" role="button" data-slide="next"><i class="zmdi zmdi-chevron-right"></i></a>
    </div>
    <!-- Indicators -->
    <ol class="carousel-indicators carousel-indicators-tumbs carousel-indicators-tumbs-outside">
        <li data-bs-target="#carousel-example-generic5" data-bs-slide-to="0" class="active">
            <img class="" src="<%= assets %>/img/demo/car2-thumb.jpg" alt="">
        </li>
        <li data-bs-target="#carousel-example-generic5" data-bs-slide-to="1">
            <img class="" src="<%= assets %>/img/demo/car1-thumb.png" alt="">
        </li>
        <li data-bs-target="#carousel-example-generic5" data-bs-slide-to="2">
            <img class="" src="<%= assets %>/img/demo/paris-thumb.png" alt="">
        </li>
    </ol>
</div>

<div class="owl-dots"></div>
<div class="owl-carousel owl-theme">
    <div class="card card-primary animation-delay-5">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port1.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
    <div class="card card-info animation-delay-6">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port2.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
    <div class="card card-danger animation-delay-7">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port3.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
    <div class="card card-royal animation-delay-5">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port4.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
    <div class="card card-warning animation-delay-6">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port5.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
    <div class="card card-success animation-delay-7">
        <img class="owl-lazy" data-src="<%= assets %>/img/demo/port6.jpg" alt="" class="img-fluid">
        <div class="card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque, vero odit, distinctio provident dolorem ullam laboriosam! Nisi asperiores unde error, reiciendis numquam! Numquam corporis incidunt doloremque repellat reiciendis, sit.
        </div>
    </div>
</div>