Skip to content

Instantly share code, notes, and snippets.

@kgsnipes

kgsnipes/kgimageslidercircular.html

Created May 9, 2012 22:23
Show Gist options
  • Save kgsnipes/2649358 to your computer and use it in GitHub Desktop.
Save kgsnipes/2649358 to your computer and use it in GitHub Desktop.
Download ZIP
circular image slider
Raw
kgimageslidercircular.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="kaushik ganguly">
<!-- Date: 2012-05-09 -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="kgimageslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container').kgimageslider({width:2000,interval:5000});
});
</script>
</head>
<body>
<div class="container" style=" width:2000px;height:650px;overflow:hidden;position:absolute;">
<ul style="padding:0px;margin:0px;list-style:none;width:8000px;height:650px;position:relative;">
<li><img width="2000" height="650" src="http://images2.solestruck.com/homepageBannerImageGAE/SoleTrain_HomePage_Banner_beta.jpg">
<img width="2000" height="650" src="http://images2.solestruck.com/homepageBannerImageGAE/seattle_large_1.jpg">
<img width="2000" height="650" src="http://images2.solestruck.com/homepageBannerImageGAE/lita_large_2.jpg"></li>
</ul>
</div>
</body>
</html>
Raw
kgimageslidercircular.js
jQuery.fn.kgimageslider=function(options){
sliderOptions=jQuery.extend({width:2000,interval:5000},options);
return this.each(function(){
var obj=$(this);
var obj_ul=$(this).children("ul");
var obj_ul_li=$(this).children("ul li");
var obj_img=$(this).find("img");
var inter=setInterval(function(){
if(obj_ul.offset().left<=-(sliderOptions.width*(obj_img.length-2)+15))
{
obj_ul.offset({left:10});
obj.children("ul").children("li").children("img").each(function(index,ele){
if(index<(obj.children("ul").children("li").children("img").length-1))
{
$(obj.children("ul").children("li").children("img").first()).appendTo(obj.children("ul").children("li"));
}
});
obj_ul.animate({"left":"-="+(sliderOptions.width+5)+"px"},600);
}
else
{
obj_ul.animate({"left":"-="+(sliderOptions.width+5)+"px"},600);
}
},sliderOptions.interval);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment