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:

Code:

	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:

Code:

<!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/s...ide/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/s...e/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.

Thread: How to make the slider loop?

Thread Tools

Search Thread

How to make the slider loop?

Similar Threads

Looking for someone that can make lytebox to loop the images

Make Lytebox loop image sets?

How to make Lytebox loop the slideshow?

Invoke Function Loop: This script works without a loop or while loop. explain why?

Conveyor - How to make it loop?

Bookmarks

Bookmarks

Posting Permissions