<?php
$flash_sql=db_query("select * from tbl_header_flash where 1 and header_flash_status='Active' order by header_flash_id");
if(mysqli_num_rows($flash_sql)>0)
{?>

<!-- BEGIN content_for_index -->
<div id="shopify-section-1534155948093" class="shopify-section index-section index-section--flush">
<div class="wrapper">
  <div class="home-slideshow">
    <div class="variable-width" data-slick='{dots: true, slidesToScroll: 1,autoplay:false,fade: true,autoplaySpeed:5000'>
      
      
        <?php
    $i=0;
while($flash_res=mysqli_fetch_array($flash_sql))
{$i++;
?>  
      
<div class="slick-list slider_style_<?=$i?>">                
<img src="<?=$site_url?>/flash_images/<?=$flash_res['header_flash_image_name']?>"  class="slide-img medium-down--hide" />

<?php
if($flash_res['header_flash_title']!="")
  {?>
<div class="slider-content slider-content-bg" style="">
  <div class="slide_left" style="">
    <h5 class="slide-text animated "
        style="display:inline-block;
               font-size: 20px;
               color:#ffffff;              
               background:#000000;
                ">
    <?=$flash_res['header_flash_title']?>
    </h5>
    <h4 class=" slide-sub-heading-2 animated "
        style="
               font-size: 45px;
               
               
               color:#ffffff;
               ">
   <?=$flash_res['header_flash_description']?>              
    </h4>
  <div class="slide_right" style="";>
  </div>
     <a href="<?=$site_url?>/products.html" class="slide-button animated btn " style="background:#ffffff;color:#000000">                    
    Shop Now <i class="fa fa-long-arrow-right" aria-hidden="true"></i>                
  </a>
     </div>
</div>
<?}?>



<style> 
.slider_style_<?=$i?> .slide-offer-text span {color:#ffffff!important;}
.slider_style_<?=$i?> .btn:hover {color:#ffffff!important;background:#000000!important;}         
.slider_style_<?=$i?> .slider-content {background:rgba(0, 60, 166, 0.7);}
@media screen and (min-width: 320px) and (max-width: 767px) {
}
</style>
</div>
      
      <?}?>
      
      
<!-- <div class="slick-list slider_style_1"> 
<img src="img/slider/slider2.jpg"  class="slide-img medium-down--hide" alt="" />
<style> 
.slider_style_1 .slide-offer-text span {color:#000!important;}
.slider_style_1 .btn:hover {color:#ffffff!important;background:#e81a46!important;}
@media screen and (min-width: 320px) and (max-width: 767px) {
.slider_style_1 .slider-content {background:rgba(255, 255, 255, 0.7);}
}
</style>
</div>
      
      
      
<div class="slick-list slider_style_2">                        
<img src="img/slider/slider3.jpg"  class="slide-img medium-down--hide" alt="" />
<style> 
.slider_style_2 .slide-offer-text span {color:#000!important;}
.slider_style_2 .btn:hover {color:#ffffff!important;background:#e81a46!important;}
@media screen and (min-width: 320px) and (max-width: 767px) {
.slider_style_2 .slider-content {background:rgba(255, 255, 255, 0.7);}
}
</style>
</div> -->
      
      
      
    </div>
  </div>
</div>



<script>  
  $(document).on('ready', function() {
    $('.variable-width').slick({
      dots: true,
      slidesToScroll: 1,
      autoplay:false,
      fade: true,
      autoplaySpeed:5000,
      afterChange: function(slick, currentSlide){
      console.log(currentSlide);
    }
                               });   
  })
</script>




<style>


  @media screen and (min-width: 320px) and (max-width: 767px) {}


  
</style>






<style>
  .home-slideshow  .slick-arrow:before{ color: #000000; }  
</style>

</div>

<?}?>