响应鼠标移动滑块

Question

我遇到了问题。当鼠标向左或向右移动时，我需要构建一个滑动的旋转木马。 到目前为止，对于那些知道自己在做什么的人的代码来说这么好没问题（顺便说一句，我不是网络开发人员！）。 我使用了这段代码：codepen.io/anon/pen/mXYVMG#anon-login

但问题是当窗口尺寸变小时，滑动范围也会变小。但我希望旋转木马能够滑动，直到最后一张图像出现在中小窗口/屏幕尺寸上。

我有什么想法可以解决这个问题吗？

jQuery(".wrapper ul").on( 'mousemove', function( event ) {{
    
    
    		var mouse = {
    			x: 0, // Current x-axis position of mouse
    		};
    
    		var containerItems = jQuery('.wrapper ul').width();
    		var docWidth = jQuery(".wrapper ul").width();
    
    		var docMinWidth = jQuery(".wrapper ul").width();
    
    		mouse.x = event.clientX || event.pageX;
    
    		mouse = mouse.x - 0;
    		var Translate = mouse * 200 / docWidth;
    		//console.log(Translate);
    
    		jQuery('.wrapper ul').css({
                 '-webkit-transform':'translateX(-'+Translate+'%) translateY(-50%)'
                ,'-moz-transform':'translateX(-'+Translate+'%) translateY(-50%)'
                ,'transform':'translateX(-'+Translate+'%) translateY(-50%)'
            });
    
    	}
    	});

 * {
      margin:0;
      padding:0;
      outline:none;
      list-style:none;
      text-decoration:none;
      box-sizing:border-box;
      color:#000;
      background: transparent;
      border:none;
    }
    
    html, body {
      height: 100%;
      width: 100%;  
    }
    
    body {
      background: #202020;
      font-family: 'Roboto', sans-serif;
    }
    
    .wrapper {
      width: 80%;
      height: 500px;
      background: #141414;
      top:50%;
      transform:translateY(-50%);
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      
       
    }
    
    ul {
        width: calc(400px * 10);
        float:left;
        height: 50%;
        position: relative;
        top:50%;
        transform:translateY(-50%);
        }
        
        li {
          height: 300px;
          margin:0 50px;
          background: #ccc;
          float:left;
          cursor:pointer;
          &:first-of-type {
            margin-left:800px;
          }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
      <ul>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/500x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
        <li><img src="http://www.placehold.it/250x300"/></li>
      </ul>
    </div>