@extends('appweb') 
@section('content') 
<!--  ส่วนเนื้อหา -->
<section id="home">
  <div class=" container"  style="background:white">
    <div class="col-sm-10 col-sm-offset-1 col-xs-12">
       
      
   
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>    
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox"  style="background:white">
    <div class="item active">
      <a href="{{URL::to('intro/2/BALL_TRANSFER')}}" class="text-uppercase  templatemo-blue-text" style="font-size:13px;"> <img src="{{asset('public/images/ball-transfer.jpg')}}?v=1001"  > </a>
      <div class="carousel-caption">
        <h3>BALL TRANSFER</h3>
      </div>
    </div>
    <div class="item">
      <a href="{{URL::to('intro/3/CLEANROOM_PRODUCT')}}" class="text-uppercase  templatemo-blue-text" style="font-size:13px;"><img src="{{asset('public/images/cleanroom-product.jpg')}}?v=1001" ></a>
      <div class="carousel-caption">
       <h3>CLEANROOM PRODUCT</h3>
      </div>
    </div>
  <div class="item">
      <a href="{{URL::to('intro/4/AIRBALL_LIFTER(ISR)')}}" class="text-uppercase  templatemo-blue-text" style="font-size:13px;"> <img src="{{asset('public/images/airball-lifter.jpg')}}?v=1001"  ></a>
      <div class="carousel-caption">
        <h3>AIRBALL LIFTER(ISR)</h3>
      </div>
    </div>
    <div class="item">
      <a href="{{URL::to('intro/5/SPECIAL_WHEEL(SW)')}}" class="text-uppercase  templatemo-blue-text" style="font-size:13px;"> <img src="{{asset('public/images/specail-wheel.jpg')}}?v=1001" > </a>
      <div class="carousel-caption">
        <h3>SPECIAL WHEEL(SW)</h3>
      </div>
    </div>
    <div class="item">
      <a href="{{URL::to('intro/6/TURN_TABLE')}}" class="text-uppercase  templatemo-blue-text" style="font-size:13px;"><img src="{{asset('public/images/turn-table.jpg')}}?v=1001"  ></a>
      <div class="carousel-caption">
        <h3>TURN TABLE</h3>
      </div>
    </div><br>
 

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
   
       
    </div>

  </div>
</section>
<!-- @include('customer.inc_product') -->
 


@endsection 
@section('script') 
<!--  ส่วน java script --> 
@endsection 
@section('style') 
<!--  ส่วน style -->
<style>
.title{
	display:none;
}
#slider-name{
	width: 330px;
    text-align: center;
    margin-left: -35px;
    text-shadow: 1px 2px 10px #1CB5BF;	
}
.flex-viewport > ul > li > p{
	height:250px;
	overflow:hidden;
	
}
.location{
	height:350px;
	overflow:auto;	
	/*border:1px dashed #000;*/
	padding:15px;	
}

.a-about:hover , .a-about:focus{
	text-decoration:none !important;
	color:#000;
}
#about-description{
	padding-top:20px;
}
@media (max-width:991px){
	.flex-viewport > ul > li > p{
	height:200px;
	overflow:hidden;	
	}
	#slider-name{
	width: 230px;
    text-align: center;
    margin-left: -15px;
    text-shadow: 1px 2px 10px #1CB5BF;
	}
}
@media (max-width:767px){
	.flex-viewport > ul > li > p{
		height:100%;	
	}
	#about-description{
		display:none;
	}
	.location{
	height:100%;
	padding:15px;
	border-bottom:1px dashed;	
	}
	.location > img{
		margin-bottom:10px;	
	}
}
.carousel-control {
    filter: alpha(opacity=50);
    opacity: 0;
}

.carousel-control.left{
    background-image: -webkit-linear-gradient(left,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);  
    background-image: -o-linear-gradient(left,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(255, 255, 255, 0.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-control.right {
    background-image: -webkit-linear-gradient(right,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);  
    background-image: -o-linear-gradient(right,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,right top,right top,from(rgba(255, 255, 255, 0.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to left,rgba(255, 255, 255, 0.5) 0,rgba(0,0,0,.0001) 100%);
}
img{width:90%}
.carousel-caption{ color:black; text-shadow: white 0 0 3px}
</style>
@endsection