infinite loop carousel(vertical or horizontal)
<!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; | |
}; |
<!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> |
This comment has been minimized.
This comment has been minimized.
Thanks a ton! |
This comment has been minimized.
This comment has been minimized.
hi @YayaBln I just modified the above code to stop infinte loop , please refer the code below,
|
This comment has been minimized.
This comment has been minimized.
Hi, thanks for this! How would I enable scrolling vertically? .viewport and .infinite-carousel are not responding to overflow-y:scroll. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Hi,
Thanks for this super & clear code. I was just wondering if it's possible to stop the infinite loop? If yes, what's your recommandation?
Regards,
Yannick