update view card

www/src/Template/Layout/blank.ctp

@@ -99,6 +99,6 @@
         <?php echo $this->Html->script('custom'); ?>
         <!-- Theme Initialization Files -->
         <?php echo $this->Html->script('theme.init'); ?>
-        
+        <?php echo $this->fetch('scriptBottom'); ?>
     </body>
 </html>

www/src/Template/UserCards/view_card.ctp

@@ -3,8 +3,7 @@
 		<div class="row">
 		    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
 			    <div>
-		            <i class = "fa fa-angle-left" >
-		            </i>
+		            <i class = "fa fa-angle-left prev" > </i>
 	        	</div>
 		    </div>
 		    <div class="col-xs-9 col-sm-9 col-md-9 box-card">
@@ -57,8 +56,7 @@
 		    </div>
 		    <div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
 			    <div>
-		            <i class = "fa fa-angle-right" >
-		            </i>
+		            <i class = "fa fa-angle-right next" ></i>
 	        	</div>
 		    </div>
 		    <div class="col-xs-12 col-sm-12 col-md-12">
@@ -119,6 +117,9 @@
 	border: 1px solid #ccc; 
 	height: 200px; 
 	margin-top: 10px;
+	border-radius: 20px;
+	box-shadow: 2px 2px 4px #ccc;
+	margin-bottom: 10px;
 }
 .box-arrow{
         font-size:36px; 
@@ -126,4 +127,36 @@
         padding-top:20%;
         cursor: pointer;
 	}
+
 </style>
+<?php $this->append('scriptBottom'); ?>
+<script type="text/javascript">
+
+$('.owl-carousel').owlCarousel({
+	loop:false,
+    items:1,
+	rewindNav : false,
+	onTranslated:callBack
+});
+owl = $('.owl-carousel').owlCarousel();
+$(".prev").click(function () {
+    owl.trigger('prev.owl.carousel');
+});
+
+$(".next").click(function () {
+    owl.trigger('next.owl.carousel');
+});
+
+function callBack(){
+    if($('.owl-carousel .owl-item').last().hasClass('active')){
+        $('.next').hide();
+        $('.prev').show(); 
+        
+    }else if($('.owl-carousel .owl-item').first().hasClass('active')){
+        $('.prev').hide(); 
+        $('.next').show();    
+    }
+}
+//$('.prev').hide(); 
+</script>
+<?php $this->end();?>