EShop slide for products: A slide show which, while display the current image, can show a edge of the next image. So users knows there are more images to be checked

edgeslide.coffee

$.fn.productSlide = (options) ->
  settings =
    width: 250
    container: "slide-container"
    # space left to display part of another photo
    edge: 30
    imageWidth: 190
    
  settings = $.extend settings, options
  
  #Put arbitary images in one row
  ($ "#"+settings.container).css "width", "10000000px"
  ($ "#"+settings.container).css "margin-left", settings.edge + "px"
  ($ "#"+settings.container+" img").each -> 
    ($ this).css "width", settings.imageWidth
  
  n = 0
  numOfImages = ($ "#"+settings.container+" img").length
  
  #Move to next picture
  @next = ->
    n = n+1 if n<numOfImages-1 
    ($ "#" + settings.container).css "margin-left", (settings.edge - settings.imageWidth * n) + "px"
    console.log settings.edge+','+settings.imageWidth*n

  @prev = ->
    n = n-1 if n > 0
    ($ "#" + settings.container).css "margin-left", (settings.edge - settings.imageWidth * n) + "px"
    console.log settings.edge+','+settings.imageWidth*n
 
  @each ->
    #set the width of the slide
    ($ this).css "width", settings.width + "px"
    ($ this).css "overflow", "hidden"