[Fork] pictureslide | C# Online Compiler

[Fork] pictureslide by jatmartinez16@gmail.com

using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		public List<string> Rutas
		{
			get;
			set;
		}

		public SampleViewModel()
		{
			this.Rutas = new List<string>()
			{
			"http://upload.wikimedia.org/wikipedia/commons/9/9e/Milky_Way_IR_Spitzer.jpg", "http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2010/11/milkyway.jpg", "http://s.ngm.com/2010/12/milky-way/img/milky-way-galaxy-615.jpg"
			}

			;
		}
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public List<string> Rutas
        {
            get;
            set;
        }
​
        public SampleViewModel()
        {
            this.Rutas = new List<string>()
            {
            "http://upload.wikimedia.org/wikipedia/commons/9/9e/Milky_Way_IR_Spitzer.jpg", "http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2010/11/milkyway.jpg", "http://s.ngm.com/2010/12/milky-way/img/milky-way-galaxy-615.jpg"
            }
​
            ;
        }
    }
}

@model HelloWorldMvcApp.SampleViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>

		<!-- CSS Includes -->
	
		<style type="text/css">

		
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  text-align: center;
}

#slider1, #slider2 {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider1 ul, #slider2 ul  {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider1 ul li, #slider2 ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 100px;
  background: #ccc;
  text-align: center;
  line-height: 100px;
}

a.control_prev1, a.control_next1,a.control_prev2, a.control_next2 {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev1:hover, a.control_next1:hover,a.control_prev2:hover, a.control_next2:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev1 {
  border-radius: 0 2px 2px 0;
}

a.control_next1 {
  right: 0;
  border-radius: 2px 0 0 2px;
}

a.control_prev2 {
  border-radius: 0 2px 2px 0;
}

a.control_next2 {
  right: 0;
  border-radius: 2px 0 0 2px;
}


.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}







body
{
    color: #333;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 18px;
}
h2
{
    color: #333;
}
a
{
    color: #337810;
}
p
{
    margin: 0 0 18px;
}
.wrapper
{
    float: left;
    width: 100%;
}

/* Header */
#header
{
    background: #eee;
    border-bottom: 2px solid #ddd;
}
#header h1
{
    color: #004b6f;
    margin: 0 0 3px;
    padding: 24px 18px 0;
}
#header p
{
    color: #666;
    font-size: 11px;
    font-weight: bold;
    padding: 0 18px;
}

/* Content Style */
.navigation
{
    padding-left: 18px;
}
.navigation ul
{
    padding: 0 18px 9px;
}
.extra
{
}
#extra small
{
    font-size: 11px;
    line-height: 18px;
}
#content p, #extra p
{
    padding-right: 18px;
}

/* Content Positioning and Size */
.navigation
{
    float: left;
    width: 21%;
    margin-left: -100%;
}
.content
{
    margin: 0 25% 36px;
}
.extra
{
    float: left;
    margin-left: -25%;
    width: 25%;
}
/* Footer */
#footer
{
    background: #333;
    clear: left;
    width: 100%;
}
#footer a
{
    color: #eee;
}
#footer p
{
    color: #ccc;
    margin: 0;
    padding: 0 18px 10px;
}
#footer ul
{
    list-style: none;
    margin: 0 18px 6px;
    padding: 10px 0 6px;
}
#footer li
{
    display: inline;
    font-size: 11px;
    font-weight: bold;
    padding-right: 5px;
}


*
{
    margin: 0;
    padding: 0;
}

.container
{
    /* width:100px;     height:100px;     position:relative;*/
}

.container .prevButton
{
    /* height:72px;*/ /*width:68px;*/ /*position:absolute;*/ /*  background:url('../images/buttons.png') no-repeat;*/ /* top:50%;*/ /* margin-top:-36px;*/
    cursor: pointer;
    z-index: 2000; /* background-position:left top;*/ /*left:0*/
}

.container .prevButton:hover
{
    background-position: left bottom; /*left:0;*/
}

.container .nextButton
{
    /* height:72px;*/ /*width:68px;*/ /*  position:absolute;*/
    background: url('../images/buttons.png') no-repeat; /*  top:50%;*/ /*  margin-top:-36px;*/
    cursor: pointer;
    z-index: 2000; /*  background-position:right top;*/ /*right:0*/
}

.container .nextButton:hover
{
    background-position: right bottom;
    right: 0;
}

.container ul
{
    /* width:100px;*/ /*height:100px;*/
    list-style: none outside none; /* position:relative;*/
    overflow: hidden;
}

.container li:first-child
{
    display: list-item; /* position:absolute;*/
}

.container li
{
    /* position:absolute;*/
    display: none;
}


.message-error
{
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.field-validation-valid
{
    display: none;
}
.validation-summary-valid
{
    display: none;
}

#loginForm .validation-error
{
    display: block;
    margin-left: 15px;
}

#loginForm .validation-summary-errors ul
{
    margin: 0;
    padding: 0;
}

#loginForm .validation-summary-errors li
{
    display: inline;
    list-style: none;
    margin: 0;
}

/* styles for validation helpers */
.field-validation-error
{
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid
{
    display: none;
}

input.input-validation-error
{
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error
{
    border: 0 none;
}

.validation-summary-errors
{
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid
{
    display: none;
}







		</style>
	</head>
	
<body>
	

	  
	<form action="" method="post" enctype="multipart/form-data">
		<div id="container">
			
    		<div id="header">
        		<h1>Acciones Requeridas.</h1>
        		<p class="description">Acciones preventivas o correctivas.</p>
    		</div>
    		<div class="wrapper">
        		<div class="content">
            		<h2>Accion requerida</h2>
             		<textarea rows="10" cols="60"></textarea>
            		<div>
                	<p></p>
            		</div>
        		</div>
    		</div>
			
    		<div class="navigation">
        		<h2>Apertura</h2>
        		<div>
            		<label>Administrador</label>
            		<input type="text"/>
        		</div>
        		<br />
        		<div>
            		<label>Responsable</label><label>Alejandro Torres</label>
        		</div>
        		<br />
        		<div>
          			<input type="checkbox"/>
        		</div>
        		<br />
        		<div>
            		Fecha apertura
            		<input type="text"/>
            		<br />
            		Fecha Promesa
            		<input type="text"/>
            		<label class="message-error" id="labelErrorFechaPromesa">            		</label>
        		</div>		
	    		<div>
        			<br />
	  				<input type="button/>
        		</div>
        		<br />
        		<br />
    		</div>
			
    		<div class="extra">
        		<h2>Archivos/Imagenes</h2>
        		<div id="reemplazarArchivos">
            		<div class="container">
                		<div id="slider1">
  							<a href="#" class="control_next1">>></a>
  							<a href="#" class="control_prev1"><</a>
  							<ul>
	  							@foreach(string s in Model.Rutas)
	  								{
	  									<li>
											<img src="@s" heigth="100px" width="200px"/>
	  									</li>
	  								}
  							</ul>  
						</div>
            		</div>
        		</div>					
        		<input type="file" name="file" />
        		<input type="submit" name="action:UploadArchivoAccionApertura" value="Upload" />
    		</div>
						
						
		</div>
					
						
						
						
		<hr />
		<br />
								
								
		<div> 
			<div class="wrapper"> 
				<div class="content"> 
					<h2> Accion de cierre</h2>
				  	<textarea rows="10" cols="60"></textarea>
	  			</div> 
			</div> 
								
			<div class="navigation"> 
				<h2> Cierre</h2> 
				<div> 
						Fecha de cierre
					  <input type="text"/>
				</div> 
				<div> 
					<br /> 
					<br />
    				<input type="submit" name="action:CierraAR" value="Cerrar"/>
				</div> 
			</div> 
								
			<div class="extra"> 				
				<h2> Archivos/Imagenes</h2> 
				<div id="reemplazarArchivosCerrados">
					<div class="container">
  						<div id="slider2">
  							<a href="#" class="control_next2">>></a>
  							<a href="#" class="control_prev2"><</a>
  							<ul>
    							@foreach(string s in Model.Rutas)
		  							{
		  								<li>
											<img src="@s" heigth="100px" width="200px"/>
	  									</li>
	  								}
  							</ul>  
						</div>
					</div> 
				</div> 
				<input type="file" name="file" />
				<input type="submit" name="action:UploadArchivoAccionCierre" value="Upload" />
			</div> 
		</div> 
</form>
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	
		<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
		
		<script type="text/javascript">
		
		jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
	var slideCount = $('#slider1 ul li').length;
	var slideWidth = $('#slider1 ul li').width();
	var slideHeight = $('#slider1 ul li').height();
  
  var slideCount = $('#slider2 ul li').length;
	var slideWidth = $('#slider2 ul li').width();
	var slideHeight = $('#slider2 ul li').height();
  
	var sliderUlWidth = slideCount * slideWidth;
	
	$('#slider1').css({ width: slideWidth, height: slideHeight });
  
  $('#slider2').css({ width: slideWidth, height: slideHeight });
	
	$('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
  
  $('#slider2 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
	
    $('#slider1 ul li:last-child').prependTo('#slider1 ul');
  
  $('#slider2 ul li:last-child').prependTo('#slider2 ul');


    function moveLeft1() {
        $('#slider1 ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider1 ul li:last-child').prependTo('#slider1 ul');
            $('#slider1 ul').css('left', '');
        });
    };
  
  function moveLeft2() {
        $('#slider2 ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider2 ul li:last-child').prependTo('#slider2 ul');
            $('#slider2 ul').css('left', '');
        });
    };

    function moveRight1() {
        $('#slider1 ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider1 ul li:first-child').appendTo('#slider1 ul');
            $('#slider1 ul').css('left', '');
        });
    };
  
  function moveRight2() {
        $('#slider2 ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider2 ul li:first-child').appendTo('#slider2 ul');
            $('#slider2 ul').css('left', '');
        });
    };
  

    $('a.control_prev1').click(function () {
        moveLeft1();
    });

    $('a.control_next1').click(function () {
        moveRight1();
    });
  
   $('a.control_prev2').click(function () {
        moveLeft2();
    });

    $('a.control_next2').click(function () {
        moveRight2();
    });

});    
		</script>
	</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
​
        <!-- CSS Includes -->
    
        <style type="text/css">
​
        
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}
​
h1 {
  text-align: center;
}
​
#slider1, #slider2 {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}
​
#slider1 ul, #slider2 ul  {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}
​
#slider1 ul li, #slider2 ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 100px;
  background: #ccc;
  text-align: center;
  line-height: 100px;
}
​
a.control_prev1, a.control_next1,a.control_prev2, a.control_next2 {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}
​
a.control_prev1:hover, a.control_next1:hover,a.control_prev2:hover, a.control_next2:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
​
a.control_prev1 {
  border-radius: 0 2px 2px 0;
}
​
a.control_next1 {
  right: 0;
  border-radius: 2px 0 0 2px;
}
​
a.control_prev2 {
  border-radius: 0 2px 2px 0;
}
​
a.control_next2 {
  right: 0;
  border-radius: 2px 0 0 2px;
}
​
​
.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}
​
​
​
​
​
​
​
body
{
    color: #333;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 18px;
}
h2
{
    color: #333;
}
a
{
    color: #337810;
}
p
{
    margin: 0 0 18px;
}
.wrapper
{
    float: left;
    width: 100%;
}
​
/* Header */
#header
{
    background: #eee;
    border-bottom: 2px solid #ddd;
}
#header h1
{
    color: #004b6f;
    margin: 0 0 3px;
    padding: 24px 18px 0;
}
#header p
{
    color: #666;
    font-size: 11px;
    font-weight: bold;
    padding: 0 18px;
}
​
/* Content Style */
.navigation
{
    padding-left: 18px;
}
.navigation ul
{
    padding: 0 18px 9px;
}
.extra
{
}
#extra small
{
    font-size: 11px;
    line-height: 18px;
}
#content p, #extra p
{
    padding-right: 18px;
}
​
/* Content Positioning and Size */
.navigation
{
    float: left;
    width: 21%;
    margin-left: -100%;
}
.content
{
    margin: 0 25% 36px;
}
.extra
{
    float: left;
    margin-left: -25%;
    width: 25%;
}
/* Footer */
#footer
{
    background: #333;
    clear: left;
    width: 100%;
}
#footer a
{
    color: #eee;
}
#footer p
{
    color: #ccc;
    margin: 0;
    padding: 0 18px 10px;
}
#footer ul
{
    list-style: none;
    margin: 0 18px 6px;
    padding: 10px 0 6px;
}
#footer li
{
    display: inline;
    font-size: 11px;
    font-weight: bold;
    padding-right: 5px;
}
​
​
*
{
    margin: 0;
    padding: 0;
}
​
.container
{
    /* width:100px;     height:100px;     position:relative;*/
}
​
.container .prevButton
{
    /* height:72px;*/ /*width:68px;*/ /*position:absolute;*/ /*  background:url('../images/buttons.png') no-repeat;*/ /* top:50%;*/ /* margin-top:-36px;*/
    cursor: pointer;
    z-index: 2000; /* background-position:left top;*/ /*left:0*/
}
​
.container .prevButton:hover
{
    background-position: left bottom; /*left:0;*/
}
​
.container .nextButton
{
    /* height:72px;*/ /*width:68px;*/ /*  position:absolute;*/
    background: url('../images/buttons.png') no-repeat; /*  top:50%;*/ /*  margin-top:-36px;*/
    cursor: pointer;
    z-index: 2000; /*  background-position:right top;*/ /*right:0*/
}
​
.container .nextButton:hover
{
    background-position: right bottom;
    right: 0;
}
​
.container ul
{
    /* width:100px;*/ /*height:100px;*/
    list-style: none outside none; /* position:relative;*/
    overflow: hidden;
}
​
.container li:first-child
{
    display: list-item; /* position:absolute;*/
}
​
.container li
{
    /* position:absolute;*/
    display: none;
}
​
​
.message-error
{
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
​
.field-validation-valid
{
    display: none;
}
.validation-summary-valid
{
    display: none;
}
​
#loginForm .validation-error
{
    display: block;
    margin-left: 15px;
}
​
#loginForm .validation-summary-errors ul
{
    margin: 0;
    padding: 0;
}
​
#loginForm .validation-summary-errors li
{
    display: inline;
    list-style: none;
    margin: 0;
}
​
/* styles for validation helpers */
.field-validation-error
{
    color: #e80c4d;
    font-weight: bold;
}
​
.field-validation-valid
{
    display: none;
}
​
input.input-validation-error
{
    border: 1px solid #e80c4d;
}
​
input[type="checkbox"].input-validation-error
{
    border: 0 none;
}
​
.validation-summary-errors
{
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}
​
.validation-summary-valid
{
    display: none;
}
​
​
​
​
​
​
​
        </style>
    </head>
    
<body>
    
​
      
    <form action="" method="post" enctype="multipart/form-data">
        <div id="container">
            
            <div id="header">
                <h1>Acciones Requeridas.</h1>
                <p class="description">Acciones preventivas o correctivas.</p>
            </div>
            <div class="wrapper">
                <div class="content">
                    <h2>Accion requerida</h2>
                    <textarea rows="10" cols="60"></textarea>
                    <div>
                    <p></p>
                    </div>
                </div>
            </div>
            
            <div class="navigation">
                <h2>Apertura</h2>
                <div>
                    <label>Administrador</label>
                    <input type="text"/>
                </div>
                <br />
                <div>
                    <label>Responsable</label><label>Alejandro Torres</label>
                </div>
                <br />
                <div>
                    <input type="checkbox"/>
                </div>
                <br />
                <div>
                    Fecha apertura
                    <input type="text"/>
                    <br />
                    Fecha Promesa
                    <input type="text"/>
                    <label class="message-error" id="labelErrorFechaPromesa">                   </label>
                </div>      
                <div>
                    <br />
                    <input type="button/>
                </div>
                <br />
                <br />
            </div>
            
            <div class="extra">
                <h2>Archivos/Imagenes</h2>
                <div id="reemplazarArchivos">
                    <div class="container">
                        <div id="slider1">
                            <a href="#" class="control_next1">>></a>
                            <a href="#" class="control_prev1"><</a>
                            <ul>
                                @foreach(string s in Model.Rutas)
                                    {
                                        <li>
                                            <img src="@s" heigth="100px" width="200px"/>
                                        </li>
                                    }
                            </ul>  
                        </div>
                    </div>
                </div>                  
                <input type="file" name="file" />
                <input type="submit" name="action:UploadArchivoAccionApertura" value="Upload" />
            </div>
                        
                        
        </div>
                    
                        
                        
                        
        <hr />
        <br />
                                
                                
        <div> 
            <div class="wrapper"> 
                <div class="content"> 
                    <h2> Accion de cierre</h2>
                    <textarea rows="10" cols="60"></textarea>
                </div> 
            </div> 
                                
            <div class="navigation"> 
                <h2> Cierre</h2> 
                <div> 
                        Fecha de cierre
                      <input type="text"/>
                </div> 
                <div> 
                    <br /> 
                    <br />
                    <input type="submit" name="action:CierraAR" value="Cerrar"/>
                </div> 
            </div> 
                                
            <div class="extra">                 
                <h2> Archivos/Imagenes</h2> 
                <div id="reemplazarArchivosCerrados">
                    <div class="container">
                        <div id="slider2">
                            <a href="#" class="control_next2">>></a>
                            <a href="#" class="control_prev2"><</a>
                            <ul>
                                @foreach(string s in Model.Rutas)
                                    {
                                        <li>
                                            <img src="@s" heigth="100px" width="200px"/>
                                        </li>
                                    }
                            </ul>  
                        </div>
                    </div> 
                </div> 
                <input type="file" name="file" />
                <input type="submit" name="action:UploadArchivoAccionCierre" value="Upload" />
            </div> 
        </div> 
</form>
      
      
      
      
      
      
      
      
      
      
      
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        
        <script type="text/javascript">
        
        jQuery(document).ready(function ($) {
​
  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
    var slideCount = $('#slider1 ul li').length;
    var slideWidth = $('#slider1 ul li').width();
    var slideHeight = $('#slider1 ul li').height();
  
  var slideCount = $('#slider2 ul li').length;
    var slideWidth = $('#slider2 ul li').width();
    var slideHeight = $('#slider2 ul li').height();
  
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider1').css({ width: slideWidth, height: slideHeight });
  
  $('#slider2').css({ width: slideWidth, height: slideHeight });
    
    $('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
  
  $('#slider2 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider1 ul li:last-child').prependTo('#slider1 ul');
  
  $('#slider2 ul li:last-child').prependTo('#slider2 ul');
​
​
    function moveLeft1() {
        $('#slider1 ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider1 ul li:last-child').prependTo('#slider1 ul');
            $('#slider1 ul').css('left', '');
        });
    };
  
  function moveLeft2() {
        $('#slider2 ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider2 ul li:last-child').prependTo('#slider2 ul');
            $('#slider2 ul').css('left', '');
        });
    };
​
    function moveRight1() {
        $('#slider1 ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider1 ul li:first-child').appendTo('#slider1 ul');
            $('#slider1 ul').css('left', '');
        });
    };
  
  function moveRight2() {
        $('#slider2 ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider2 ul li:first-child').appendTo('#slider2 ul');
            $('#slider2 ul').css('left', '');
        });
    };
  
​
    $('a.control_prev1').click(function () {
        moveLeft1();
    });
​
    $('a.control_next1').click(function () {
        moveRight1();
    });
  
   $('a.control_prev2').click(function () {
        moveLeft2();
    });
​
    $('a.control_next2').click(function () {
        moveRight2();
    });
​
});    
        </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View(new SampleViewModel());
		}

		[HttpPost]
		public JsonResult GetAnswer(string question)
		{
			int index = _rnd.Next(_db.Count);
			var answer = _db[index];
			return Json(answer);
		}

		private static Random _rnd = new Random();
		private static List<string> _db = new List<string>
		{
		"Yes", "No", "Definitely, yes", "I don't know", "Looks like, yes"
		}

		;
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
​
        [HttpPost]
        public JsonResult GetAnswer(string question)
        {
            int index = _rnd.Next(_db.Count);
            var answer = _db[index];
            return Json(answer);
        }
​
        private static Random _rnd = new Random();
        private static List<string> _db = new List<string>
        {
        "Yes", "No", "Definitely, yes", "I don't know", "Looks like, yes"
        }
​
        ;
    }
}

View in Full Screen

View IL Code