Skip to content

Instantly share code, notes, and snippets.

@m3talsmith

m3talsmith/simple_slider_using_divs.html

Created March 12, 2010 16:42
Show Gist options
  • Save m3talsmith/330504 to your computer and use it in GitHub Desktop.
Save m3talsmith/330504 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simple_slider_using_divs.html
<html>
<head>
<title>Side Scroller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#posts {position: relative; width: 300px;}
.controls {position: relative; height: 2em; width: 100%;}
.controls .control {position: absolute; top: 0px; cursor: pointer;}
#post_controls #left {left: 0px;}
#post_controls #right {right: 0px;}
.pages {position: absolute; top: 0px; left: 0px; list-style: none none; padding: 0px; margin: 0px; width: 3700px;}
.pages .page {position: relative; float: left; padding: 0px; margin: 0px; width: 300px;}
#post_pages {position: relative; width: 300px; height: 240px; overflow: hidden;}
</style>
<script type="text/javascript">
var current_page = 0;
function initialize_slider() {
// -- initialize basic elements --
var posts = $("#posts");
var pages = posts.find(".pages");
var right_button = posts.find("#right");
var left_button = posts.find("#left");
var page_count = pages.find(".page").length;
// -- initiliaze element events --
right_button.click(function(){
new_page = (current_page + 1);
if(new_page < page_count) { pages.animate({left: -(new_page * 300) + "px"}); current_page = new_page; }
});
left_button.click(function(){
new_page = (current_page - 1);
if(new_page > -1) { pages.animate({left: -(new_page * 300) + "px"}); current_page = new_page; }
});
}
$().ready(function(){initialize_slider();});
</script>
</head>
<body>
<div id="posts">
<div id="post_controls" class="controls">
<div id="left" class="control">previous page</div>
<div id="right" class="control">next page</div>
</div>
<div id="post_pages">
<div class="pages">
<img class="page" src="http://wexfordjewelers.com/images/items/small_230722-IMG_6274.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_614339-IMG_6055.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_797781-IMG_6206.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_2762.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_0854.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_0828.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_0258.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_9215.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_5237.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_5175.JPG" />
<img class="page" src="http://wexfordjewelers.com/images/items/small_IMG_5150.JPG" />
</div>
</div>
<div>
</body>
</html>
Raw
simple_slider_using_unordered_lists.html
<html>
<head>
<title>Side Scroller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#posts {position: relative; width: 300px;}
.controls {position: relative; height: 2em; width: 100%;}
.controls .control {position: absolute; top: 0px; cursor: pointer;}
#post_controls #left {left: 0px;}
#post_controls #right {right: 0px;}
.pages {position: absolute; top: 0px; left: 0px; list-style: none none; padding: 0px; margin: 0px; width: 3700px;}
.pages .page {position: relative; float: left; padding: 0px; margin: 0px; width: 300px;}
#post_pages {position: relative; width: 300px; height: 240px; overflow: hidden;}
</style>
<script type="text/javascript">
var current_page = 0;
function initialize_slider() {
// -- initialize basic elements --
var posts = $("#posts");
var pages = posts.find(".pages");
var right_button = posts.find("#right");
var left_button = posts.find("#left");
var page_count = pages.find(".page").length;
// -- initiliaze element events --
right_button.click(function(){
new_page = (current_page + 1);
if(new_page < page_count) { pages.animate({left: -(new_page * 300) + "px"}); current_page = new_page; }
});
left_button.click(function(){
new_page = (current_page - 1);
if(new_page > -1) { pages.animate({left: -(new_page * 300) + "px"}); current_page = new_page; }
});
}
$().ready(function(){initialize_slider();});
</script>
</head>
<body>
<div id="posts">
<div id="post_controls" class="controls">
<div id="left" class="control">previous page</div>
<div id="right" class="control">next page</div>
</div>
<div id="post_pages">
<ul class="pages">
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_230722-IMG_6274.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_614339-IMG_6055.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_797781-IMG_6206.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_2762.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_0854.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_0828.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_0258.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_9215.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_5237.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_5175.JPG" /></li>
<li class="page"><img src="http://wexfordjewelers.com/images/items/small_IMG_5150.JPG" /></li>
</ul>
</div>
<div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment