zyrx/horizontal-infinite-carousel.html

## horizontal-infinite-carousel.html
<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        </script>
        <meta charset='utf-8' />
        <title>
           infinite loop carousel(horizontal)
        </title>
        <style>
            .infinite-carousel .list{
                width:1400px;
                height:200px;
                overflow:visible;
            }
            .infinite-carousel .viewport{
              width:410px;
              height:200px;
              overflow:hidden;
            }
            .item{
                width:200px;
                height:200px;
                text-align: center;
                vertical-align: middle;
                line-height: 200px;
                margin-right:10px;
                float: left;
                /*display: inline-block;*/
            }
            .r{
                background-color: red;
            }
            .g{
                background-color: #cf5;
            }
            .b{
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div class='infinite-carousel'>
            <button class='pre'>pre</button>
            <div class="viewport">
                <div class='list'>
                    <div class='item g'>
                        1
                    </div>
                    <div class='item r'>
                        2
                    </div>
                    <div class='item g'>
                        3
                    </div>
                    <div class='item b'>
                        4
                    </div>
                    <div class='item r'>
                        5
                    </div>
                    <div class='item g'>
                        6
                    </div>
                    <div class='item b'>
                        7
                    </div>
                </div>
            </div>
            <button class='next'>next</button>
        </div>

        <script src='infiniteCarousel.js'></script>
        <script>
            $('.infinite-carousel').infiniteCarousel({
                itemsPerMove : 2,
                duration : 500
            });
        </script>
    </body>

</html>

## infiniteCarousel.js
/**
 * infinite loop carousel
 * @author newdongyuwei@gmail.com
 * @param  {Object} config
 * @return {Object} this
 */
$.fn.infiniteCarousel = function(config){
    config = $.extend({
        itemsPerMove : 2,
        duration : 1000,
        vertical : false
    },config);

    var viewportEl = this.find('.viewport'), listEl = viewportEl.find('.list');
    var first = listEl.children(":first"), last = listEl.children(":last");

    var distance, prevProp, nextProp;
    if(config.vertical){
        distance = Math.max(first.outerHeight(true),last.outerHeight(true)) * config.itemsPerMove;
        prevProp = { 'scrollTop' : "-=" + distance };
        nextProp = { 'scrollTop' : distance };
    }else{
        distance = Math.max(first.outerWidth(true),last.outerWidth(true)) * config.itemsPerMove;
        prevProp = { 'scrollLeft' : "-=" + distance };
        nextProp = { 'scrollLeft' : '+=' + distance };
    }

    function move(config) {
        if (config.dir === 'next') {
            viewportEl.stop().animate(nextProp,{
                duration : config.duration,
                complete : function() {
                    config.vertical ? viewportEl.scrollTop(0) : viewportEl.scrollLeft(0);
                    repeatRun(function(){
                        listEl.children(":last").after(listEl.children(":first"));
                    },config.itemsPerMove);
                }
            });
        }

        if (config.dir === 'pre') {
            for(var i = 0; i < config.itemsPerMove; i++){
                listEl.prepend(listEl.children(":last"));
            }
            viewportEl[config.vertical ? 'scrollTop' : 'scrollLeft'](distance)
            .stop().animate(prevProp, {
                duration : config.duration
            });
        }
    }

    function repeatRun(func,times){
        for(var i = 0; i < times; i++){
            func();
        }
    }

    this.find('.pre').click(function() {
        move($.extend(config,{
            dir: "pre"
        }));
    });

    this.find('.next').click(function() {
        move($.extend(config,{
            dir: "next"
        }));
    });

    return this;
};

## vertical-infinite-carousel.html
<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        </script>
        <meta charset='utf-8' />
        <title>
           infinite loop carousel(vertical)
        </title>
        <style>
            .infinite-carousel .list{
                width:200px;
                height:1400px;
                overflow:visible;
            }
            .infinite-carousel .viewport{
              width:200px;
              height:410px;
              overflow:hidden;
            }
            .item{
                width:200px;
                height:200px;
                text-align: center;
                vertical-align: middle;
                line-height: 200px;
                float: left;
                margin-bottom: 10px;
            }
            .r{
                background-color: red;
            }
            .g{
                background-color: #cf5;
            }
            .b{
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div class='infinite-carousel'>
            <button class='pre'>pre</button>
            <div class="viewport">
                <div class='list'>
                    <div class='item g'>
                        1
                    </div>
                    <div class='item r'>
                        2
                    </div>
                    <div class='item g'>
                        3
                    </div>
                    <div class='item b'>
                        4
                    </div>
                    <div class='item r'>
                        5
                    </div>
                    <div class='item g'>
                        6
                    </div>
                    <div class='item b'>
                        7
                    </div>
                </div>
            </div>
            <button class='next'>next</button>
        </div>

        <script src='infiniteCarousel.js'></script>
        <script>
            $('.infinite-carousel').infiniteCarousel({
                itemsPerMove : 2,
                duration : 500,
                vertical : true
            });
        </script>
    </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
	</script>
	<meta charset='utf-8' />
	<title>
	infinite loop carousel(horizontal)
	</title>
	<style>
	.infinite-carousel .list{
	width:1400px;
	height:200px;
	overflow:visible;
	}
	.infinite-carousel .viewport{
	width:410px;
	height:200px;
	overflow:hidden;
	}
	.item{
	width:200px;
	height:200px;
	text-align: center;
	vertical-align: middle;
	line-height: 200px;
	margin-right:10px;
	float: left;
	/display: inline-block;/
	}
	.r{
	background-color: red;
	}
	.g{
	background-color: #cf5;
	}
	.b{
	background-color: blue;
	}
	</style>
	</head>

	<body>
	<div class='infinite-carousel'>
	<button class='pre'>pre</button>
	<div class="viewport">
	<div class='list'>
	<div class='item g'>
	1
	</div>
	<div class='item r'>
	2
	</div>
	<div class='item g'>
	3
	</div>
	<div class='item b'>
	4
	</div>
	<div class='item r'>
	5
	</div>
	<div class='item g'>
	6
	</div>
	<div class='item b'>
	7
	</div>
	</div>
	</div>
	<button class='next'>next</button>
	</div>

	<script src='infiniteCarousel.js'></script>
	<script>
	$('.infinite-carousel').infiniteCarousel({
	itemsPerMove : 2,
	duration : 500
	});
	</script>
	</body>

	</html>
	/**
	* infinite loop carousel
	* @author newdongyuwei@gmail.com
	* @param {Object} config
	* @return {Object} this
	*/
	$.fn.infiniteCarousel = function(config){
	config = $.extend({
	itemsPerMove : 2,
	duration : 1000,
	vertical : false
	},config);

	var viewportEl = this.find('.viewport'), listEl = viewportEl.find('.list');
	var first = listEl.children(":first"), last = listEl.children(":last");

	var distance, prevProp, nextProp;
	if(config.vertical){
	distance = Math.max(first.outerHeight(true),last.outerHeight(true)) * config.itemsPerMove;
	prevProp = { 'scrollTop' : "-=" + distance };
	nextProp = { 'scrollTop' : distance };
	}else{
	distance = Math.max(first.outerWidth(true),last.outerWidth(true)) * config.itemsPerMove;
	prevProp = { 'scrollLeft' : "-=" + distance };
	nextProp = { 'scrollLeft' : '+=' + distance };
	}

	function move(config) {
	if (config.dir === 'next') {
	viewportEl.stop().animate(nextProp,{
	duration : config.duration,
	complete : function() {
	config.vertical ? viewportEl.scrollTop(0) : viewportEl.scrollLeft(0);
	repeatRun(function(){
	listEl.children(":last").after(listEl.children(":first"));
	},config.itemsPerMove);
	}
	});
	}

	if (config.dir === 'pre') {
	for(var i = 0; i < config.itemsPerMove; i++){
	listEl.prepend(listEl.children(":last"));
	}
	viewportEl[config.vertical ? 'scrollTop' : 'scrollLeft'](distance)
	.stop().animate(prevProp, {
	duration : config.duration
	});
	}
	}

	function repeatRun(func,times){
	for(var i = 0; i < times; i++){
	func();
	}
	}

	this.find('.pre').click(function() {
	move($.extend(config,{
	dir: "pre"
	}));
	});

	this.find('.next').click(function() {
	move($.extend(config,{
	dir: "next"
	}));
	});

	return this;
	};