dileephell/gist:5054491

## gistfile1.txt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Infinite Carousel</title>
<style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; }

.infiniteCarousel {
  width: 395px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(images/arrow.png) no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}


-->
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<script type="text/javascript">

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }

    return this.each(function () {
        var $wrapper = $('> div', 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);
                    // reset back to start position
                    page = 1;
                }

                currentPage = page;
            });

            return false;
        }

        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');

        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });

        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });

        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>
</head>
<body>
    <h1>Infinite Carousel</h1>

    <div class="infiniteCarousel">
      <div class="wrapper">
        <ul>
          <li><a href="http://www.flickr.com/photos/remysharp/3047035327/" title="Tall Glow"><img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047872076/" title="Wet Cab"><img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg" height="75" width="75" alt="Wet Cab" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047871878/" title="Rockefella"><img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg" height="75" width="75" alt="Rockefella" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047034929/" title="Chrysler Reflect"><img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047871624/" title="Chrysler Up"><img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg" height="75" width="75" alt="Chrysler Up" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047034661/" title="Time Square Awe"><img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg" height="75" width="75" alt="Time Square Awe" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047034531/" title="Wonky Buildings"><img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li>
          <li><a href="http://www.flickr.com/photos/remysharp/3047034451/" title="Leaves of Fall"><img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li>
        </ul>
      </div>
    </div>
</body>
</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Infinite Carousel</title>
	<style type="text/css" media="screen">
	<!--
	body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
	input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
	label { display: block; }

	.infiniteCarousel {
	width: 395px;
	position: relative;
	}

	.infiniteCarousel .wrapper {
	width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	overflow: auto;
	min-height: 10em;
	margin: 0 40px;
	position: absolute;
	top: 0;
	}

	.infiniteCarousel ul a img {
	border: 5px solid #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}

	.infiniteCarousel .wrapper ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
	}

	.infiniteCarousel ul li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	}

	.infiniteCarousel ul li a img {
	display:block;
	}

	.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	background: url(images/arrow.png) no-repeat 0 0;
	text-indent: -999px;
	position: absolute;
	top: 37px;
	cursor: pointer;
	}

	.infiniteCarousel .forward {
	background-position: 0 0;
	right: 0;
	}

	.infiniteCarousel .back {
	background-position: 0 -72px;
	left: 0;
	}

	.infiniteCarousel .forward:hover {
	background-position: 0 -36px;
	}

	.infiniteCarousel .back:hover {
	background-position: 0 -108px;
	}



	-->
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


	<script type="text/javascript">

	$.fn.infiniteCarousel = function () {

	function repeat(str, num) {
	return new Array( num + 1 ).join( str );
	}

	return this.each(function () {
	var $wrapper = $('> div', 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);
	// reset back to start position
	page = 1;
	}

	currentPage = page;
	});

	return false;
	}

	$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');

	// 5. Bind to the forward and back buttons
	$('a.back', this).click(function () {
	return gotoPage(currentPage - 1);
	});

	$('a.forward', this).click(function () {
	return gotoPage(currentPage + 1);
	});

	// create a public interface to move to a specific page
	$(this).bind('goto', function (event, page) {
	gotoPage(page);
	});
	});
	};

	$(document).ready(function () {
	$('.infiniteCarousel').infiniteCarousel();
	});
	</script>
	</head>
	<body>
	<h1>Infinite Carousel</h1>

	<div class="infiniteCarousel">
	<div class="wrapper">
	<ul>
	<li><a href="http://www.flickr.com/photos/remysharp/3047035327/" title="Tall Glow"><img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047872076/" title="Wet Cab"><img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg" height="75" width="75" alt="Wet Cab" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047871878/" title="Rockefella"><img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg" height="75" width="75" alt="Rockefella" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047034929/" title="Chrysler Reflect"><img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047871624/" title="Chrysler Up"><img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg" height="75" width="75" alt="Chrysler Up" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047034661/" title="Time Square Awe"><img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg" height="75" width="75" alt="Time Square Awe" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047034531/" title="Wonky Buildings"><img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li>
	<li><a href="http://www.flickr.com/photos/remysharp/3047034451/" title="Leaves of Fall"><img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li>
	</ul>
	</div>
	</div>
	</body>
	</html>