<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://localhost/original_pos/assets/images/favicon.ico">

<!-- App title -->
<title>SkedWise</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css"> 


    <style> 
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background: #eee;
  min-height: 100vh;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
}  

.fullscreen { 
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #ebeff2;
            border: none;
 } 
<?php 
if (isset($ads_images)) {
    $classj_for_image = 1;
    foreach ($ads_images as $image) {
        $class = "#carousel .carousel-item.image-".$classj_for_image;
        echo "
                $class {
                    background-image: url('" . base_url() . "assets/images/productImages/" . $image->image_path . "');
                }
              ";
        $classj_for_image++;
    }
}
?>   
#carousel .carousel-item{
  height:100vh;
  width:100%;
  min-height:350px;
  background:no-repeat center center scroll;
  background-size:cover;
}
#carousel .carousel-inner .carousel-item{
  transition:-webkit-transform 2s ease;
  transition:transform 2s ease;
  transition:transform 2s ease, -webkit-transform 2s ease;
}
#carousel .carousel-item .caption{
  background:rgba(0,0,0,0.5);
  padding:40px;
  color:white;
  animation-duration: 1s;
  animation-delay: 2s;
}
#carousel .caption h2{
  animation-duration: 1s;
  animation-delay: 2s;
}
#carousel .caption p{
  animation-duration: 1s;
  animation-delay: 2.2s;
}

#carousel .caption a{
  animation-duration: 1s;
  animation-delay: 2.4s;
}
.delicious-btn{
  display: inline-block;
  min-width:160px;
  height:60px;
  color:#fff;
  border:none;
  border-left:3px solid #1c8314;
  border-radius: 0;
  padding:0 30px;
  font-size:16px;
  line-height:58px;
  font-weight:600;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-transform: capitalize;
  background:#40ba37;
}
.delicious-btn:hover,
.delicious-btn:active,
.delicious-btn:focus{
  font-size:16px;
  font-weight: 600;
  color:#fff;
  background:#1c8314;
  border-color:#40ba37
}

  

    </style>
</head>
<body>  
  
  <div class="container-fluid p-0   main-con">
    <div id="carousel" class="carousel slide hero-slides" data-ride="carousel">
      <ol class="carousel-indicators " style="display: none;">
        <li class="active" data-target="#carousel" data-slide-to="0"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox"> 

          <?php 
          
          if(isset($ads_images)){  
            if(count($ads_images) > 0){ 
              $i=0; 
              $class_for_image=1;
              foreach($ads_images  as $images){ 
                      $class=  "image-".$class_for_image;  
                      $class_for_image++; 

                     if($i ==0){ 

                      ?>
                      <div class="carousel-item active <?php echo $class ;?>">
                        <div class="container h-100 d-md-block">
                          <div class="row align-items-center h-100">
                            <div class="col-12 col-md-9 col-lg-7 col-xl-6">
                              <div class="caption animated fadeIn "  style="display: none;">
                              
                              </div>
                            </div>
                          </div>
                        </div>
                      </div> 
                      <?php
                      $i++;

                     }else{ 

                      ?>
                      <div class="carousel-item <?php echo $class ;?>">
                        <div class="container h-100 d-md-block">
                          <div class="row align-items-center h-100">
                            <div class="col-12 col-md-9 col-lg-7 col-xl-6">
                              <div class="caption animated fadeIn hidden"  style="display: none;">
                              
                              </div>
                            </div>
                          </div>
                        </div>
                      </div> 
                      <?php

                     }       
              } 
            }else{ 
              ?> 
              <div class="row hidden-print"style="margin: 100px 100px 100px 100px;">
                 <div class="col-sm-12">
                     <div class="alert alert-danger" style="padding: 60px">
                         <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                         <strong>Warning!</strong> Advertisement Images Currently Unavailable
                      </div>
                 </div>
             </div>
             <?php 

            } 

          }else{
            ?> 
             <div class="row hidden-print"style="margin: 100px 100px 100px 100px;">
                <div class="col-sm-12">
                    <div class="alert alert-danger" style="padding: 60px">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <strong>Warning!</strong> Advertisement Images Currently Unavailable
                     </div>
                </div>
            </div>
            <?php 
          }
          
        ?>
      </div>
      <a class="carousel-control-prev "  style="display: none;" href="#carousel" role="button" 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 hidden"   style="display: none;" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" scr="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>
 
</body>
</html>