    <section id="teaser-blog">
	 	<div class="container">
		  <div class="row">
				<!--<div class="col-md-6">
				  <h2 class="title">Car Rental Page</h2>
				</div> -->
			<div class="col-md-12 text-right">
			 <ul class="breadcrumbs page-depth">
			  <li><a href="#">Home</a></li>
			  <!--<li><a href="#">Blog</a></li>-->
			  <li class="active">Our Fleets</li>
            </ul>
           </div>
          </div>
         </div>
     </section>
     
     <!-- Vehicles start -->
          <section id="vehicles" class="container">
            <div class="row">
              <div class="col-md-12">
                <h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
              </div>

              <!-- Vehicle nav start -->
              <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
                <div id="vehicle-nav-container">
                  <ul class="vehicle-nav" id='myid'>
                  	<?php 
			      	 $counter=0;
				  	 foreach($fleets as $v){
					 if($counter == 0){
					  echo'<li class="active" id="myvehicle" value="'.$v["id"].'"><a href="#vehicle-'.$v["id"].'" id="vehicle">'.$v["fullname"].'</a><span class="active">&nbsp;</span></li>';	
						
					 }else{
					  echo'<li id="myvehicle" value="'.$v["id"].'"><a href="#vehicle-'.$v["id"].'" id="vehicle">'.$v["fullname"].'</a><span class="active">&nbsp;</span></li>';	
						
					 }
					   $counter++;	
				    }
					
				    ?>
                      
                  </ul>
                </div>

                  <div class="vehicle-nav-control">
                      <a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
                      <a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
                  </div>

              </div>
              <!-- Vehicle nav end --> 
              <?php 
			  //if(count($fleets) > 0){
				foreach($fleets as $c){
				  
			  ?>     
              <?php 
			  $query = $this->db->query('SELECT * FROM `tblimages` WHERE `car_id` = '.$c["id"].' ORDER BY RAND()');
			  //if($query->num_rows() > 0){
			  
						
			  /*}else{
						
			  }*/
			  ?>
            <!-- Vehicle 1 data start -->
            <div class="vehicle-data" id="vehicle-<?php echo $c["id"];?>">
             <div class="col-md-6 wow fadeIn" data-wow-offset="100">
              <div class="vehicle-img">
              	<div class="sync1 owl-carousel owl-theme">
                    <?php 
					if($query->num_rows() > 0){
						foreach ($query->result() as $data)
			  			{
							echo'<div class="item">';
							echo"<img src=".base_url("assets/img/car/".$data->name."").">";					echo'</div>';
			  			}
					}else{
							echo'<div class="item">';
							echo"<img src=".base_url("assets/img/car/no_image_car.jpg").">";									                            echo'</div>';
					}
					?>
                </div>

              	<div id="sync2" class="sync2 owl-carousel owl-theme">
                  	<?php 
					if($query->num_rows() > 0){
						foreach ($query->result() as $row)
			  			{
							echo'<div class="item">';
							echo"<img src=".base_url("assets/img/car/".$row->name."").">";	
							echo'</div>';
						}
					}else{
							echo'<div class="item">';
							echo"<img src=".base_url("assets/img/car/no_image_car.jpg").">";									                            echo'</div>';
					}
					?>
                </div>
                                  	  
              </div>
             </div>

             <div class="col-md-3 wow fadeInUp" data-wow-offset="200">
               <div class="vehicle-price"><span class="info"><?php echo $c["fullname"];?></span></div>   
                  <table class="table vehicle-features">
                  	<?php 
					 $sql = $this->db->query('SELECT `car_id`, `name`, `value`, `status` FROM `tblcomponent` WHERE `car_id` = '.$c["id"].' and `status` = 1');
					if($sql->num_rows() > 0){ 
						foreach ($sql->result() as $b)
			  			{
							echo"<tr>
							 	<td>".$b->name."</td>
							 	<td>".$b->value."</td>
						     	</tr>";
						}
					}else{
							
							echo"<tr>
							 	<td>No Data</td>
							 	<td>No Value</td>
						     	</tr>";
					}
					
					?>
                  </table>
                  <a href="<?php echo base_url("home");?>" class="reserve-button scroll-to" id="mybtn"><span class="glyphicon glyphicon-calendar" ></span> Reserve now</a>
                  
                </div>
              </div>
              
              <?php }?>
              <!-- Vehicle 1 data end -->
            </div>
          </section>
          <!-- Vehicles end -->

          <!-- Information start -->
        <section id="information" class="container">
          <!-- Video start -->
         
          <!-- Video end -->
          

   </section>
  <!-- Information end --> 
    
 </div>   
 
  <!-- Demo -->
    <style>
    #sync1 .item{
        background: #fff;
        padding: 10px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }
	
    #sync2 .item{
        background: #fff;
        padding: 10px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
	
    }
	
    #sync2 .item h1{
      font-size: 18px;
    }
	
    #sync2 .synced .item{
      background: #fff;
	 
    }

	<!--owl-button-->
	#owl-demo .item{
  	display: block;
  	padding: 30px 0px;
  	margin: 5px;
  	color: #FFF;
  	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px;
  	border-radius: 3px;
  	text-align: center;
	}
	
	.owl-theme .owl-controls .owl-buttons div {
  		position: absolute;
	}
 
	.owl-theme .owl-controls .owl-buttons .owl-prev{
  		/*left: -45px;*/
		left: 5px;
  		top: 55px; 
	}
 
	.owl-theme .owl-controls .owl-buttons .owl-next{
  		/*right: -45px;*/
		right: 5px;
  		top: 55px;
	}
	
	.owl-theme .owl-controls .owl-buttons div {
  		padding: 5px 9px;
		/*padding:10 30 10 10px;*/
	}
 
	.owl-theme .owl-buttons i{
  		margin-top: 2px;
	}
	
    </style>


    <script type="text/javascript">
    $(document).ready(function() {
      var sync1 = $(".sync1");
      var sync2 = $(".sync2");

      sync1.owlCarousel({
        singleItem : true,
        slideSpeed : 1000,
        navigation: true,
        pagination:false,
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
      });

      sync2.owlCarousel({
        items : 4,
        itemsDesktop      : [1199,5],
        itemsDesktopSmall     : [979,5],
        itemsTablet       : [768,4],
        itemsMobile       : [479,3],
        pagination:false,
        responsiveRefreshRate : 100,
        afterInit : function(el){
          el.find(".owl-item").eq(0).addClass("synced");
        }
      });

      function syncPosition(el){
        var current = this.currentItem;
        $(".sync2")
          .find(".owl-item")
          .removeClass("synced")
          .eq(current)
          .addClass("synced")
        if($(".sync2").data("owlCarousel") !== undefined){
          center(current)
        }

      }

      $(".sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
      });

      function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

        var num = number;
        var found = false;
        for(var i in sync2visible){
          if(num === sync2visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            sync2.trigger("owl.goTo", num - sync2visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync2.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          sync2.trigger("owl.goTo", num-1)
        }
      }

    });
    </script>
