Dashboard

1 / 3

Caption Text

2 / 3

Caption Two

3 / 3

Caption Three

<div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides zoom">
        <div class="numbertext">1 / 3</div>
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides slide">
        <div class="numbertext">2 / 3</div>
        <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
        <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1,0)"><i class="fas fa-chevron-left"></i></a>
    <a class="next" onclick="plusSlides(1,0)"><i class="fas fa-chevron-right"></i></a>
</div>
<br>

<!-- The dots/circles -->
<div class="pagination" style="text-align:center">
    <span class="dot" onclick="currentSlide(1,0)"></span>
    <span class="dot" onclick="currentSlide(2,0)"></span>
    <span class="dot" onclick="currentSlide(3,0)"></span>
</div>

...

<script>
    var slideIndex = [1];
    var slideId = ["mySlides"];
    var dotId = ["dot"];
    timeInterval = 4000;
    showSlides(1, 0);
</script>
                    

<div class="col-md-2 primary card">
    <i class="fas fa-comments fa-5x"></i>
    <strong>45</strong>
    <div class="body">
        Comments
    </div>
</div>
<div class="col-sm-1"></div>
<div class="col-md-2 warning card">
    <i class="fas fa-tasks fa-5x"></i>
    <strong>12</strong>
    <div class="body">
        Pending tasks
    </div>
</div>
<div class="col-sm-1"></div>
<div class="col-md-2 success card">
    <i class="fas fa-shopping-cart fa-5x"></i>
    <strong>3</strong>
    <div class="body">
        Orders
    </div>
</div>
<div class="col-sm-1"></div>
<div class="col-md-2 danger card">
    <i class="fas fa-question-circle fa-5x"></i>
    <strong>9</strong>
    <div class="body">
        Tikets
    </div>
</div>
                    

<div class="col-lg-12 alert success">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<div class="col-lg-12 alert warning">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
                        

<div class="col-lg-12 note primary">                    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<br />
<div class="col-lg-12 note danger">                    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>