PDA

View Full Version : How to make the slider loop?



jelly46
08-29-2013, 11:22 AM
I have found a carousel that i will be working with it is what i need apart from one thing. How do make it loop instead of speeding back to the first slide. http://jsfiddle.net/PGcY2/

jscheuer1
08-29-2013, 04:54 PM
You would really need a rewrite. Pne way would be instead of using marginLeft and keeping everything in the same order in the DOM, I would use scrollLeft and continually append the scrolled from item to the end of its parent.

I recently did something like that for a vertical scroller:


function scroll(){
clearTimeout(timer);
if(mouseisover || $o.hasClass('full')){
timer = setTimeout(scroll, resume);
return;
}
$o.animate({scrollTop: '+=' + h}, 800, function(){
$o.append($('.game', $o).removeClass('current').eq(0)).scrollTop(0);
$('.game', $o).eq(0).addClass('current');
timer = setTimeout(scroll, pause);
});
}


That's just the core part of it (there's another function to help with the mouseover pause, you may or may not need/want that part), perhaps you can adapt it. $o is a container element with a set height (in your case it would be a set width), with overflow hidden. The slides are .game class elements inside it. h is their height. With yours, unless the width is the same for all, you would need individual widths (h would become w, and w would be calculated on $('.game').eq(0).width() to get it to scroll out of view, bringing in the next one, Then in the call back, it would be tacked on the end and the scrollLeft reset to 0.

Another method would be to duplicate the train of slides and keep moving the unseen one to the end either via position, margin or whatever.

jscheuer1
08-30-2013, 12:23 AM
If that's too little for you to work with, try this:


<!DOCTYPE html>
<html>
<head>
<title>Horizontal Slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" />
<style type="text/css">
#banner-wrapper {width:960px; overflow:hidden; height:290px; margin:0 auto; border-radius: 20px;}
#home-slider {width:960px; height:290px; white-space: nowrap;}
#home-slider .slide {width:960px; height:290px; display: inline-block; white-space: normal; border-radius: 20px;}
#home-slider .slide p {width:200px; height:200px; padding:10px; }
#slide_menu {width:960px; margin:0 auto; text-align: center;}
#slide_menu li {display: inline; margin-right:20px;}
#slide_menu li a {background-color:#333; width:16px; height:16px; display: inline-block; text-indent:-9999px; border-radius: 15px;}
#slide_menu li a:hover {background-color:#666;}
#slide_menu li.act a {background-color:#800000;}


</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
// Simple Slider Script (c)2013 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery(function($){
var totWidth = 0, mouseisover, pause = 3000, resume = 1000;
$('#home-slider .slide').each(function(i, s){
totWidth += $(s).data('index', i).addClass('index' + i).width();
});
var $o = $('#banner-wrapper').add('#slide_menu li a').hover(function(){mouseisover = true;}, function(){mouseisover = false;}).end();
var $in = jQuery('#home-slider').width(totWidth);
function scroll(reorder){
clearTimeout(timer);
if(mouseisover){
timer = setTimeout(scroll, resume);
return;
}
$('.menuItem.act').removeClass('act').addClass('inact');
$('.menuItem').eq($('.slide', $o).eq(1).data('index')).removeClass('inact').addClass('act');
$o.animate({scrollLeft: '+=' + $('.slide', $o).eq(0).width()}, 1000, function(){
$in.append($('.slide', $o).removeClass('current').eq(0));
$o.scrollLeft(0);
$('.slide', $o).eq(0).addClass('current');
reorder === true && restoreorder();
timer = setTimeout(scroll, pause);
});
}
var timer = setTimeout(scroll, pause);
function restoreorder(){
var $s = $('.slide', $o), l = $s.length, firsti = $s.eq(0).data('index'), i = 0;
while (++i < l) {
targi = (++firsti) % l;
if($('.slide', $o).eq(i).data('index') !== targi){
$('.slide', $o).eq(i).before($('.slide', $o).filter('.index' + targi));
}
}
}
$('.menuItem a').click(function(e){
var i = $(this).parent().index();
if($('.slide', $o).eq(0).data('index') !== i){
mouseisover = false;
clearTimeout(timer);
$o.stop(true, true);
if($('.slide', $o).eq(1).data('index') !== i){
$('.slide', $o).eq(0).after($('.slide', $o).filter('.index' + i));
}
scroll(true);
}
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="banner-wrapper">
<div id="home-slider">
<div class="slide" style=" background: pink;">
<p>some text 1</p>
</div><!--close slide-->

<div class="slide" style=" background: orange;">
<p>some text 2</p>
</div><!--close slide-->

<div class="slide" style=" background: yellow;">
<p>some text 3</p>
</div><!--close slide-->

<div class="slide" style=" background: lightblue;">
<p>some text 4</p>
</div><!--close slide-->

</div><!--close home-slider-->


</div><!--close banner-wrapper-->
<div id="slide_menu" class="group">
<ul>
<li class="menuItem act"><a href="" title="">1</a></li>
<li class="menuItem inact"><a href="" title="">2</a></li>
<li class="menuItem inact"><a href="" title="">3</a></li>
<li class="menuItem inact"><a href="" title="">4</a></li>
</ul>
</div><!--close slide_menu-->


</body>
</html>



Demo:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/hslide/hslide.htm

It has neat effects in most browsers (curved corners, round menu links). These use border-radius, which isn't supported in IE 8 and less, where everything is square. In IE 7 it is a real mess because IE 7 doesn't do display: inline-block; according to standards. Javascript could be used to fix that. But I'm not sure supporting anything less then IE 8 is warranted.

jscheuer1
09-02-2013, 03:14 AM
I've been fiddling with this a bit more. Here's a more advanced version:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/hslide/hslidefn.htm

It can be used more than once on a page, includes a pause/resume button, next/previous bars on either side of the content, optional fade instead of slide transition (second one on the page) and does support IE 7.