<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<!-- <div class="demo">
<?php //echo '<img class="inline-photo show-on-scroll is-visible" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/main-01.png">';?>
</div> -->

<div class="slider_section" id="slider" >

<div class="banner-area banner-style-one" > 

  <div class="owl-slider">
    <div id="carousel" class="owl-carousel">
      <?php
      $args = array( 'post_type' => 'slider', 'orderby'   => 'id', 'order' => 'DESC',);
      if(!empty($pageId)){
        $args['page_id'] = absint($pageId);

      }
      $text = '';
      $query = new WP_Query($args);
      if($query->have_posts()){
        while($query->have_posts()) : $query->the_post(); 
        

        if( get_theme_mod('slider_areaOpacity',true) ) {
          $slider_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('slider_areaOpacity')).';';
        }
        if( get_theme_mod('slider_Tfontsize',true) ) {
          $slider_Tfontsize = 'font-size:'.esc_attr(get_theme_mod('slider_Tfontsize')).';';
        }

        $pageLink = '';
        $slider_btn_link = get_post_meta($post->ID,'slider_btn_link',false);
        $sliderBtnTxt = get_post_meta($post->ID,'sliderBtnTxt',false);
        if(!empty($slider_btn_link) && is_array($slider_btn_link)){
          $pageLink = esc_url(get_permalink($slider_btn_link[0]));
        }
        if(!empty($sliderBtnTxt) && is_array($sliderBtnTxt)){
          $pageLinkTxt = $sliderBtnTxt[0];
        }else{
          $pageLinkTxt = 'Start Free Trial';
        }

        ?>
        <div class="item wow zoomIn">
           <div class="slider_gradiant"></div> 
          <?php 
            if(has_post_thumbnail()){
              $total_slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');  
              echo '<img class="slide-mainimg" alt="'. esc_html(get_the_title()) .'" src="'.esc_url($total_slider_image[0]).'">';
          }?>

          <?php
          if($showContent == 'on'){
            ?>
            <div class="slider_content " data-wow-duration="1s">
              <div class="title">
                <?php echo (get_the_title()); ?>
              </div>
              <div class="sub-title">
                <?php echo (get_the_content()); ?>
              </div>
              <?php 
              if(!empty($pageLink)){ ?>
                <div class="slide-btna">
                  <div class="btn5">  
                    <a href="<?php echo $pageLink; ?>">
                      <?php echo($pageLinkTxt); ?> 
                    </a>
                  </div>
                </div>
              <?php }?>
            </div>
            <?php }?>

          </div>
          <?php
        endwhile;
      }else{ 
        for($i=0;$i<6;$i++){?>
        <div class="item wow zoomIn">
 <div class="slider_gradiant"></div> 
            <?php echo '<img class="slide-mainimg" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider1.jpg">';?> 

          <?php if($showContent == 'on'){?>

        <div class="slider_content " data-wow-duration="1s">
            
            <div class="title ">So let’s Make up Our Minds</div>
            <div class="sub-title ">The Single Instructor demo of Course builder ,the best word press theme for Elearing online Teaching and schools </div>
            <div class="slide-btna ">
              <div class="btn5">
                <a href="#">
                  <?php _e( 'Our Services', 'luzuk-premium' ); ?>
                </a>
              </div>
            </div>
          </div>

          
          <?php }?>
        </div>
        <?php }
      }?>
    </div>
  </div>  
  <div class="border1"></div>
  <div class="border2"></div>
<!--   <div class="border3"></div>
  <div class="border4"></div> -->
<?php echo '<img class="shape" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/shape-1.png">';?>
</div>
<!-- <?php //echo '<img class="shape" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/shape-1.png">';?> -->
</div>
<script>
    $(document).ready(function() {
      $('#slider .owl-carousel').owlCarousel({
                 slideSpeed :1000,
                   autoplay: true,
                   loop: true,
                   margin: 30,
                   animateOut: 'lightSpeedOut',
                   responsiveClass: true,
                   responsive: {
                    0: {
                      items: 1,
                      nav: true
                    },
                    600: {
                      items:1,
                      nav: true
                    },
                    1000: {
                      items:1,
                      nav: true,
                      loop: true,
                      margin:10
                    }
                   }
                })
    })
  </script>

  <style type="text/css">
.slider_section img.shape {
    position: absolute;
    width: 100%;
    z-index: 999;
    bottom: -1px;
}
.banner-style-one .border1 {
    top: 0%;
    left: 14%;
    position: absolute;
    height:100%;
    width: 1px;
    border-left: 1px solid ;
     z-index:1;
}
.banner-style-one .border1:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -2px;
    width: 4px;
    height: 30px;
    -webkit-animation: scroll1 6s ease-out infinite;
    animation: scroll1 6s ease-out infinite;
    /*background: #fcb90f;*/
}

.banner-style-one .border2 {
    top: 0%;
    left: 50%;
    position: absolute;
    height: 100%;
    width: 2px;
    border-left: 1px solid ;
     z-index: 1;
}

.banner-style-one .border2:before {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 30px;
    -webkit-animation: scroll2 6s ease-out infinite;
    animation: scroll2 6s ease-out infinite;
   /* background: #fcb90f;*/
    overflow: hidden;
}

.banner-style-one .border3 {
    top: 120px;
    position: absolute;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid;
     z-index: 1;
}

@-webkit-keyframes scroll1 {
  0% {
    opacity: 1;
    bottom: 0; }
  50% {
    bottom: 50%; }
  100% {
    bottom: 100%;
    opacity: 0.5; } }

@keyframes scroll1 {
  0% {
    opacity: 1;
    bottom: 0; }
  50% {
    bottom: 50%; }
  100% {
    bottom: 100%;
    opacity: 0.5; } 
}

@-webkit-keyframes scroll2 {
  0% {
    opacity: 1;
    top: 0; }
  50% {
    top: 50%; }
  100% {
    top: calc(100% - 30px);
    opacity: 0.5; } }

@keyframes scroll2 {
  0% {
    opacity: 1;
    top: 0; }
  50% {
    top: 50%; }
  100% {
    top: calc(100% - 30px);
    opacity: 0.5; } 
}


@-webkit-keyframes scroll3 {
  0% {
    opacity: 1;
    left: 0; }
  50% {
    left: 50%; }
  100% {
    left: 100%;
    opacity: 0.5; } }

@keyframes scroll3 {
  0% {
    opacity: 1;
    left: 0; }
  50% {
    left: 50%; }
  100% {
    left: 100%;
    opacity: 0.5; }
}


   </style>

   <script type="text/javascript">

   </script>
