Advanced Search

Results 1 to 4 of 4

Thread: How to make the slider loop?

  1. #1
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How to make the slider loop?

    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/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-30-2013 at 12:52 AM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-04-2013 at 03:24 PM. Reason: added more features
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Looking for someone that can make lytebox to loop the images
    By elmdwarf in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-20-2012, 07:05 AM
  2. Make Lytebox loop image sets?
    By mustang4ever in forum JavaScript
    Replies: 6
    Last Post: 07-18-2012, 08:52 AM
  3. How to make Lytebox loop the slideshow?
    By lisali in forum JavaScript
    Replies: 4
    Last Post: 10-24-2009, 05:38 PM
  4. Replies: 3
    Last Post: 04-26-2009, 03:10 AM
  5. Conveyor - How to make it loop?
    By kdumas in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-10-2008, 03:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •