Skip to content

Instantly share code, notes, and snippets.

@parse

parse/jquery-infiniteslider.js

Created April 20, 2011 20:25
Show Gist options
  • Save parse/932749 to your computer and use it in GitHub Desktop.
Save parse/932749 to your computer and use it in GitHub Desktop.
Download ZIP
index.html
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infinite slider</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<ul id="splash-nav-ul">
<li id="left-arrow"><a class="back" href="#" title="Previous">&lt;</a></li>
<li id="right-arrow"><a class="forward" href="#" title="Next">&gt;</a></li>
</ul>
<div id="splash-container">
<div id="splash-splash">
<ul>
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
</div>
</div>
<div id="splash-manual-nav-container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type='text/javascript' src='jquery-infiniteslider.js'></script>
</body></html>
Raw
jquery-infiniteslider.js
/*
* Carousel
*/
(function($){
$.fn.infiniteCarousel = function () {
/*
* Manual navigation
*/
$("ul#splash-manual-nav a").live('click', function () {
var navVal = $(this).attr("href");
$('#splash-manual-nav li a.active').removeClass('active');
$(this).addClass('active');
navVal = navVal.replace('#', '');
$('#splash-splash').trigger('goto', parseInt(navVal, 10));
return false;
});
/*
* Add all links to the manual navigation area
*/
var listcount = $(this).css('overflow', 'hidden').find('> ul').find('> li').size(),
appendlist = '';
for (i = 1; i <= listcount; i++) {
appendlist = appendlist + '<li><a href="#'+i+'" ' + (i==1?'class="active"':'') + '>i</a></li>';
}
$('#splash-manual-nav-container').append('<ul id="splash-manual-nav">'+appendlist+'</ul>');
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $(this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
currentPage = 1,
pages = Math.ceil($items.length / visible);
// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
// 3. Set the left position to the first 'real' item
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
}
currentPage = page;
$("#splash-manual-nav li a.active").removeClass("active");
$("ul#splash-manual-nav li:nth-child("+currentPage+") a").addClass("active");
});
return false;
}
// 5. Bind to the forward and back buttons
$('a.back').click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward').click(function () {
return gotoPage(currentPage + 1);
});
// create a public interface to move to a specific page
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
})(jQuery);
/*
* Buckle up
*/
$(document).ready(function () {
$('#splash-splash').infiniteCarousel();
});
Raw
style.css
#splash-nav-ul { height:50px; position:relative; overflow: hidden; width: 950px; margin-left: 0; }
#splash-nav-ul li { list-style:none; position: absolute; }
#splash-nav-ul li a { text-indent: -99999px; height: 41px; width:25px; float: left; }
#splash-nav-ul li#left-arrow { height:41px; width:25px; background: url('left-arrow.png') no-repeat top center; float:left; }
#splash-nav-ul li#right-arrow { height:41px; width:25px; background: url('right-arrow.png') no-repeat top center; margin-left:100px;}
#splash-container { height: 323px; width:842px; overflow:hidden; position:relative; -moz-box-shadow: 1px 1px 10px #202020; -webkit-box-shadow: 1px 1px 10px #202020;}
#splash-splash { margin:0px; padding:0px;height: 323px; width: 842px; overflow: auto; position: relative;}
#splash-splash ul { width:9999px; position: absolute; top:0; left:0; margin-left:0px; }
#splash-splash ul li { float:left; list-style:none; width:842px; }
#splash-manual-nav-container { height:50px; position:relative; }
#splash-manual-nav { width:150px; height:20px; }
#splash-manual-nav li { list-style:none; padding-top:10px; padding-left: 5px; float:left; }
#splash-manual-nav li:first-child { margin-left:0px; }
#splash-manual-nav li a { text-indent: -9999px; height:10px; width:10px; float:left; background:#ccc; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
#splash-manual-nav li a.active { background:#000000; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment