<?php /*?><?php
$sql="SELECT * FROM  tbl_header_flash WHERE header_flash_status='Active' AND header_flash_type='Main' LIMIT 1 ";
$dataBanner=db_query($sql);
$recBanner=mysqli_fetch_array($dataBanner);
@extract($recBanner);
?>
<section  id="main-slider" data-background="<?=$site_url?>/flash_images/<?=$header_flash_image_name?>" class="parallax-window">
			<div class="section-slogan">
				
				<h2><?=$header_flash_title?></h2>
				<h3><?=$header_flash_description?></h3>
			</div>
			<!--<span class="scoll-down">Scroll Down</span>-->
		</section><?php */?>
		
        
<link rel="stylesheet" href="assets/css/style-slider.css" type="text/css">
<script type="text/javascript" src="assets/js/jssor.slider-21.1.5.min.js"></script>
<script>
        jssor_1_slider_init = function() {
            
            var jssor_1_SlideshowTransitions = [
              {$Duration:1200,$Opacity:2}
            ];
            
            var jssor_1_options = {
              $AutoPlay: true,
              $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };
            
            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
          
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };
    </script>
    
<section class="slid-mrg">
  <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1920px; height: 800px; overflow: hidden; visibility: hidden;"> 
    <!-- Loading Screen -->
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
      <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
    </div>
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1920px; height: 800px; overflow: hidden;">
      <div data-p="112.50" style="display: none;"> <img data-u="image" src="assets/images/slider-img/slider1.jpg"/> 
        <!--<h2>DIVYA GEM STONEX</h2>
				<h3>Divya Gem Stonex</h3>-->
      
      </div>
      <div data-p="112.50" style="display: none;"> <img data-u="image" src="assets/images/slider-img/slider2.jpg" /> </div>
      <div data-p="112.50" style="display: none;"> <img data-u="image" src="assets/images/slider-img/slider3.jpg"/> </div>
      <div data-p="112.50" style="display: none;"> <img data-u="image" src="assets/images/slider-img/slider4.jpg"/> </div>
      <div data-p="112.50" style="display: none;"> <img data-u="image" src="assets/images/slider-img/slider5.jpg"/> </div>
    </div>
    <!-- Bullet Navigator -->
    <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1"> 
      <!-- bullet navigator item prototype -->
      <div data-u="prototype" style="width:20px; height:30px;"></div>
    </div>
    <!-- Arrow Navigator --> 
    <span data-u="arrowleft" class="jssora12l" style="top:0px;left:0px;width:30px;height:46px;" data-autocenter="2"></span> <span data-u="arrowright" class="jssora12r" style="top:0px;right:0px;width:30px;height:46px;" data-autocenter="2"></span> </div>
</section>

<script>
        jssor_1_slider_init();
</script>