<style>
div#ban-img{
	border:0px solid #FF0000; top:270px; z-index:100000; position:absolute; left:600px;; 
	}
	div#ban-img h2 {
    color: #fff;
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
	background-color:transparent;
	padding:0px 20px 0px 20px; 
		
	}
	div#ban-img p{
	color:#fff; font-size:18px
	}

 @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
	 div#ban-img{
		 border:0px solid #FF0000; margin-top:-100px; z-index:100000; position:absolute; margin-left:50px;
	 }
        div#ban-img h2 {
        font-size: 1.4rem;
		margin-right:20px;
		
    }
		div#ban-img p{
			color:#fff; font-size:18px
	}
	
	}
	@media only screen and (min-width: 320px) and (max-width: 480px) {
		div#demo1 img{
			height:100%;
		}
	}
</style>
<?php 
		if(count($homebanner)>0){
			
			$bannerCnt= count($homebanner);
			
			if($isHomePage){
				$height="550px";
				
			}else{
				//$height="300px";
				
			}
		?>
        
        <article class="demo_block">
			   <ul id="demo1" style="height:<?php echo $height;?>; margin:0px auto;">
				<?php 
					$slideInd=0;
					foreach($homebanner as $banner){
						$slideInd++;
					?>	
				<li>
				<?php if($banner->simage!='' and file_exists('./static/uploadfiles/homebanners/'.$banner->simage)){?>	
                <img src="./utility/processImage.php?imageName=<?php echo urlencode($banner->simage); ?>&w=1900&h=630&mod=1&type=1&<?php echo date("HisdmY");?>" alt="<?php //echo $banner->title?>"/>        
                <?php }?>
                
                <div id="ban-img">
                	<h2><?php echo $banner->title?></h2>
                   
                </div>
                </li>
           <?php }?></ul>
</article>
<?php }else{echo "Not Available";}?>


<script>
			$(function() {
				var demo1 = $("#demo1").slippry({
					// transition: 'fade',
					// useCSS: true,
					// speed: 1000,
					// pause: 3000,
					// auto: true,
					// preload: 'visible',
					// autoHover: false
				});

				$('.stop').click(function () {
					demo1.stopAuto();
				});

				$('.start').click(function () {
					demo1.startAuto();
				});

				$('.prev').click(function () {
					demo1.goToPrevSlide();
					return false;
				});
				$('.next').click(function () {
					demo1.goToNextSlide();
					return false;
				});
				$('.reset').click(function () {
					demo1.destroySlider();
					return false;
				});
				$('.reload').click(function () {
					demo1.reloadSlider();
					return false;
				});
				$('.init').click(function () {
					demo1 = $("#demo1").slippry();
					return false;
				});
			});
		</script>
  