editorial

@@ -70,14 +70,16 @@
                             </div>
                         </div>
                         
+                        <div class="related-groups">
                             <div class="related-goods goods">
                             {{# relatedGroup}}
                                 {{> related-goods}}
                             {{/ relatedGroup}}
-                            <span class="left iconfont">&#xe62c;</span>
-                            <span class="right iconfont">&#xe629;</span>
                             </div>
                         </div>
+                        <span class="left iconfont hide">&#xe62c;</span>
+                        <span class="right iconfont">&#xe629;</span>
+                    </div>
                 {{/ related}}
             {{/ content}}
 

@@ -17,9 +17,12 @@ var $commentList = $commentArea.find('.comments-wrap'),
     MAX_COMMENTS_WORDS = 100,
     $wordCountTip = $('#word-count-tip'),
     _alert = dialog.Alert,
-    tag = $('#tags').find('li').length;
+    tag = $('#tags').find('li').length,
+    len = $('.goods').find('.good-info').length / 4,
+    pag = 0;
 
 require('../plugins/share');
+//require('yoho-unslider');
 
 $('#prise-btn').click(function() {
     var prising = false,
@@ -192,10 +195,35 @@ if ($('.collocation').find('.good-info').length === 0) {
 
 if ($('.goods').find('.good-info').length === 0) {
     $('.related-group').hide();
+} else if ($('.goods').find('.good-info').length < 5) {
+    $('.left').hide();
+    $('.right').hide();
 }
 
-// $('.left').click(function {
-//     $('.goods').animate({ left: '+50px' }, "slow");
-// })
+$('.right').click(function() {
+    pag = pag + 1;
 
-// console.log($('.goods').offsetWidth()
+    if (pag === len -1 ) {
+        $('.right').addClass('hide');
+    }
+
+    if (pag !== 0 ) {
+        $('.left').removeClass('hide');
+    }
+
+    $('.goods').animate({left: '+=' + '-930px'});
+})
+
+$('.left').click(function() {
+    pag = pag - 1;
+
+    if (pag === 0) {
+        $('.left').addClass('hide');
+    }
+
+    if(pag !== len -1) {
+        $('.right').removeClass('hide');
+    }
+
+    $(".goods").animate({left: '+=' + '930px'});
+})

@@ -98,6 +98,10 @@
         overflow: hidden;
         position: relative;
 
+        .collocation {
+            margin-left: 30px;
+        }
+
         .btn {
             position: relative;
         }
@@ -137,8 +141,21 @@
         }
     }
 
+    .related-group {
+        position: relative;
+        height: 450px;
+    }
+
+    .related-groups {
+        width: 930px;
+        overflow: hidden;
+        position: relative;
+        height: 420px;
+        margin-left: 30px;
+    }
+
     .related-goods {
-        padding: 60px 0 0 30px;
+        padding-top: 60px;
 
         .good-info {
             width: 219px;
@@ -173,6 +190,11 @@
     .goods {
         height: 420px;
         overflow: hidden;
+        position: absolute;
+
+        .good-info:nth-child(4n) {
+            margin-right: 0;
+        }
     }
 
     .related-brand {
@@ -500,4 +522,8 @@
         padding-left: 30px;
         width: 330px;
     }
+
+    .hide {
+        display: none;
+    }
 }