simplyScroll v2

a flexible jQuery content scroller with touch support

Horizontal scrolling example

Jump to: [HTML] [Javascript] [CSS]

This product is no longer supported! It was originally created in 2008 and web technology and processing speeds have increased to the point where this scrolling technique is no longer necessary. Please use something else!

simplyScroll running with default settings.

HTML

<ul id="scroller">
	<li><img src="image1.jpg" width="290" height="200"></li>
	<li><img src="image2.jpg" width="290" height="200"></li>
	<li><img src="image3.jpg" width="290" height="200"></li>
    ...
</ul>            

Javascript

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" 
type="text/css">

<script type="text/javascript">
(function($) {
	$(function() { //on DOM ready 
    		$("#scroller").simplyScroll();
	});
 })(jQuery);
</script>

CSS

The styles are included in the CSS supplied, unused button styles removed below for brevity.

/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll { 
	width: 576px;
	height: 200px;
	margin-bottom: 1em;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
	width: 576px;
	height: 200px;
}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {
	float: left; /* Horizontal scroll only */
	width: 290px;
	height: 200px;
}

« Back to simplyScroll Home

Images used on this page are courtesy of Key-2 Luxury / Firehouse