It makes a Slider

slider

#STYL CSS
turn_into_slider( items, width , height)
	position: relative
	display: inline-block
	width: width
	height: height
	overflow: hidden

	.slider
		position: absolute
		width: (width + 10 ) * items
		height: height
		left: 0px
		transition(0.3s,left,linear)

	.slide
		width: width
		height: height
		position: relative
		display: inline-block

#CONTROLLER

class ActionController extends Spine.Controller

	events:
		"click .slider>*>.button" : "on_dinamic_button_click"
		"click .slider>*>.restart" : "on_dinamic_button_click"
		
	constructor: ->
		super

	on_dinamic_button_click: (e) ->
		target = $(e.target)
		action = target.attr "data-action"

		if action == 'next_slide'
			@go_to_slide(target)

		else if action == 'last_slide'
			@go_to_slide(target,false)

		else if action == 'send_form'
			@go_to_slide(target) if @send_form(target)

	go_to_slide:(target , next=true) ->
		slide = target.parents('.slide')
		slider = slide.parent()
		width = slide.outerWidth()  + 4
		slider.css('left' , '-=' + width ) if next
		slider.css('left' , '+=' + width ) if !next

	validate_form: (form) ->
		index = form.find('[type="email"]').val().indexOf('@')
		return false if  index ==-1
		return true
			
	send_form: (target) ->
		form = target.siblings('form')		
		if !@validate_form(form)
			error = form.parent().find('.error')
			error.html('Check your email, is not valid...') 
			error.css('color','red')
			return false
		else
			array = form.serializeForm()
			$.post('/process_form',JSON.stringify(array))
			return true

window.ActionController = ActionController