Theme Configurator

Header Options
Navbar Options

Material Style

Components Menu

Carousels

Basic Carousel

Card Title

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit. Praesentium non velit at natus ut dolores iusto totam doloremque perspiciatis. Quidem.

Button Button

Card Title

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit. Praesentium non velit at natus ut dolores iusto totam doloremque perspiciatis. Quidem.

Button Button 
<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>

Thumbnails Indicators

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

Thumbnails Indicators Outside

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

Owl Carousel

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.
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.
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.
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.
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.
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 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>

MaterialStyle

Social Links

12
 4