editorial

@@ -69,14 +69,16 @@
                                 </div>
                                 </div>
                             </div>
                             </div>
                         </div>
                         </div>
-
-                        <div class="related-goods goods">
-                        {{# relatedGroup}}
-                            {{> related-goods}}
-                        {{/ relatedGroup}}
-                            <span class="left iconfont">&#xe62c;</span>
-                            <span class="right iconfont">&#xe629;</span>
+                        
+                        <div class="related-groups">
+                            <div class="related-goods goods">
+                            {{# relatedGroup}}
+                                {{> related-goods}}
+                            {{/ relatedGroup}}
+                            </div>
                         </div>
                         </div>
+                        <span class="left iconfont hide">&#xe62c;</span>
+                        <span class="right iconfont">&#xe629;</span>
                     </div>
                     </div>
                 {{/ related}}
                 {{/ related}}
             {{/ content}}
             {{/ content}}
@@ -107,22 +109,22 @@
         </div>
         </div>
 
 
         {{# userInfo}}
         {{# userInfo}}
-            <div class="user-handle">
-                <ul class="clearfix">
-                    <li id="prise-btn" class="like-status{{# isLike}} liked{{/ isLike}}">
-                        <a href="javascript:;">
-                            <i class="iconfont">&#xe60e;</i>
-                            <span class="like-num">{{likeNum}}</span>
-                        </a>
-                    </li>
-                    <li id="collect-btn" class="sort-collect{{# isCollected}} collected{{/ isCollected}}">
-                        <a href="javascript:;">
-                            <i class="iconfont">&#xe619;</i>
-                            <span>收藏</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
+        <div class="user-handle">
+            <ul class="clearfix">
+                <li id="prise-btn" class="like-status{{# isLike}} liked{{/ isLike}}">
+                    <a href="javascript:;">
+                        <i class="iconfont">&#xe60e;</i>
+                        <span class="like-num">{{likeNum}}</span>
+                    </a>
+                </li>
+                <li id="collect-btn" class="sort-collect{{# isCollected}} collected{{/ isCollected}}">
+                    <a href="javascript:;">
+                        <i class="iconfont">&#xe619;</i>
+                        <span>收藏</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
         {{/ userInfo}}
         {{/ userInfo}}
 
 
         {{> share}}
         {{> share}}

@@ -17,9 +17,12 @@ var $commentList = $commentArea.find('.comments-wrap'),
     MAX_COMMENTS_WORDS = 100,
     MAX_COMMENTS_WORDS = 100,
     $wordCountTip = $('#word-count-tip'),
     $wordCountTip = $('#word-count-tip'),
     _alert = dialog.Alert,
     _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('../plugins/share');
+//require('yoho-unslider');
 
 
 $('#prise-btn').click(function() {
 $('#prise-btn').click(function() {
     var prising = false,
     var prising = false,
@@ -192,10 +195,35 @@ if ($('.collocation').find('.good-info').length === 0) {
 
 
 if ($('.goods').find('.good-info').length === 0) {
 if ($('.goods').find('.good-info').length === 0) {
     $('.related-group').hide();
     $('.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;
         overflow: hidden;
         position: relative;
         position: relative;
 
 
+        .collocation {
+            margin-left: 30px;
+        }
+
         .btn {
         .btn {
             position: relative;
             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 {
     .related-goods {
-        padding: 60px 0 0 30px;
+        padding-top: 60px;
 
 
         .good-info {
         .good-info {
             width: 219px;
             width: 219px;
@@ -173,6 +190,11 @@
     .goods {
     .goods {
         height: 420px;
         height: 420px;
         overflow: hidden;
         overflow: hidden;
+        position: absolute;
+
+        .good-info:nth-child(4n) {
+            margin-right: 0;
+        }
     }
     }
 
 
     .related-brand {
     .related-brand {
@@ -500,4 +522,8 @@
         padding-left: 30px;
         padding-left: 30px;
         width: 330px;
         width: 330px;
     }
     }
+
+    .hide {
+        display: none;
+    }
 }
 }