使用jQuery NiceScroll显示div中图像的特定部分

Question

我正在使用jQuery NiceScroll插件进行自定义滚动条。我有一个包含一堆图像的div，当div大小溢出时，我将它们显示在内联中。它完成并且工作正常。现在我的要求是从第一张图片开始我要显示第一张图片和第二张图片的一小部分，以便让用户知道有更多图像可供查看，然后当滚动下一张时我想要显示完整的第二张图像和第三张图像的somae部分等等。我想以滑块的方式显示图像。我希望你们了解我的要求。这是我的代码块。

    <div id="scrollbar1">
            <div class="scrollbar">
                <div class="track">
                    <div class="thumb">
                        <div class="end">
                        </div>
                    </div>
                </div>
            </div>
            <div class="viewport">
                <div class="overview">                
                    <img src="Comic.jpg" alt="" />
                    ...........
                    ...........`enter code here`
                </div>
            </div>
  </div>


$(document).ready(function() {
      $('.overview').niceScroll({
        autohidemode: 'false',     // Do not hide scrollbar when mouse out
        cursorborderradius: '5px', // Scroll cursor radius
        background: '#E5E9E7',     // The scrollbar rail color
        cursorwidth: '8px',       // Scroll cursor width
        cursorcolor: 'Green',     // Scroll cursor color
    cursorheight: '3px'         
      });


    nice = $(".overview").niceScroll();

    var _super = nice.getContentSize;
    nice.getContentSize = function() {      
      var page = _super.call(nice);
      page.h = nice.win.height();
      return page;
    }

    });