Slide horizontal

index.html

<header>
  <h1>Pantalla Slide</h1>
  <p>Información extra del flujo</p>
</header>
<content>

	<div class="row">
		<div class="col-md-10 col-md-offset-1">
			
			<div id="pantalla_slide">
				<ul>
					<li class="fondo_1"> 
						<p class="text-center" >
							<button class="btn btn-default" onClick='window.ScrollScreen["pantalla_slide"].next();' >Siguiente</button> 
						</p>
					</li>
					<li class="fondo_2">
						<p class="text-center" >
							<button class="btn btn-default" onClick='window.ScrollScreen["pantalla_slide"].back();'>Volver</button>
							<button class="btn btn-default" onClick='window.ScrollScreen["pantalla_slide"].next();' >Siguiente</button>
						</p>
					</li>
					<li class="fondo_1">
						<p class="text-center" >
							<button class="btn btn-default" onClick='window.ScrollScreen["pantalla_slide"].back();'>Volver</button> 
						</p>
					</li>
					
				</ul>
			</div>
			
			
		</div>	
	</div>
		
</content>

script.js

jQuery.fn.extend({
	
	scrollScreen : function () {
		
		this.each(function(){
						
			if ($(this).attr('id') == undefined) {
				alert("scrollScreen: Debe definir un ID al componente");
				return;
			}
			
			window.ScrollScreen = window.ScrollScreen || [];
			
			var unique 			= $(this).attr('id');
			var divElement 	= $(this); 
			var nbrSlides 	= $(this).find('li').length;
			var maxWidth 		= nbrSlides * 100;
			window.ScrollScreen[unique] = window.ScrollScreen[unique] || {};
			
			$(this).css('overflow','hidden' );
			
			$(this).find('ul').each(function(){
				$(this).css('margin', '0px')
							 .css('padding', '0px')
						   .css('height', '100%')
							 .css('list-style-type', 'none')
							 .css('width', maxWidth + '%');
			});
			
			$(this).find('li').each(function(){
				$(this).css('display', 'block')
							 .css('float', 'left')
							 .css('margin', '0px')
							 .css('padding', '0px')
						   .css('height', '100%')
							 .css('width', (100 / nbrSlides) + '%');
			});
		
			window.ScrollScreen[unique].pos = 1;
			
			window.ScrollScreen[unique].next = function () {
				window.ScrollScreen[unique].pos++;
				if (window.ScrollScreen[unique].pos > nbrSlides)  {
						window.ScrollScreen[unique].pos = nbrSlides;
				}
				if ( window.ScrollScreen[unique].pos <= nbrSlides ) {
					$(divElement).find('ul').each(function(){
						$(this).animate({ "margin-left": "-="+$(divElement).width()+"px" }, "slow" );
					});		
				}
			}
			
			window.ScrollScreen[unique].back = function () {
				window.ScrollScreen[unique].pos--;
				if (window.ScrollScreen[unique].pos < 1) {
						window.ScrollScreen[unique].pos = 1;
				} 
				if ( window.ScrollScreen[unique].pos > 0 ) {
					$(divElement).find('ul').each(function(){
						$(this).animate({ "margin-left": "+="+$(divElement).width()+"px" }, "slow" );
					});		
				}
			}
			
		});// End foreach
	}
	
});

$("#pantalla_slide").scrollScreen();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

slide-horizontal.markdown

Slide horizontal

Slide de pantalla adicional para inserción de información extra al flujo

A Pen by Cesar Gonzalez on CodePen.

License.

style.css

html, body {
    font-size: 12px;
    background: #e5ebf4;
    font-family: 'Open Sans', sans-serif !important;
}

body {margin:0;}

h1 {
  position:relative;
  margin:0px auto;
  width:auto;
  padding-bottom:0px;
  font-size:4.1rem;
  font-weight:300;
  letter-spacing: -0.15rem;
  color:#FFF
}

header {
  background:#2b303b;
  text-align:center;
  padding:10px;
}
header p {color:#96b5b4;}

/* estilo del widget */

#pantalla_slide {
	width: 90%;
	height: 400px;
	margin: 30px auto;
}

.fondo_1 {
	background-color: yellowgreen;
}
.fondo_2 {
		background-color: green;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />