Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to loop an image slider

    Hello,
    I'm having a little bit of trouble with an image slider I am doing. I need it to loop to the beginning of the slide show when it reaches the end of the images

    Here is my markup:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Twin Tiers Technologies - Image Slider</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="scripts.js" type="text/javascript"></script>
    </head>
    
    <body>
    	<div id="wrapper">
        	<div id="container">
            	<div id="mask">
                	<div id="slider">
                		<div id="images">
                    		<img src="images/web.jpg" alt="Websites" />
                        	<img src="images/mims.jpg" alt="Mortuary Information Management System" />
                        	<img src="images/cims.jpg" alt="Cremetory Information Managment System" />
                        	<img src="images/motv.jpg" alt="Memories On TV" />
                        	<img src="images/web-casting.jpg" alt="Web Casting" />
                        	<img src="images/support.jpg" alt="Support" />
                        </div>
                    </div>
                </div>
            </div>
            <img src="images/arrow-back.png" id="back" />
            <img src="images/arrow-forward.png" id="forward" />
        </div>
    
    </body>
    </html>
    Here is my CSS
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    #wrapper{
    	width: 902px;
    	margin: 200px auto;
    }
    
    #container{
    	width: 861px;
    	height: 225px;
    	margin: 0 auto;
    	background-image:url(images/slider-bg.png);
    	background-repeat: no-repeat;
    }
    
    #mask{
    	width: 731px;
    	height: 225px;
    	margin: 20px auto;
    	overflow: hidden;
    }
    
    #slider{
    	width: 2000px;	
    }
    
    #slider img{
    	float: left;
    	padding: 5px;	
    }
    
    #back{
    	float: left;
    	position: relative;
    	top: -140px;	
    }
    
    #forward{
    	float: right;
    	position: relative;
    	top: -140px;	
    }
    
    #images{
    	position: relative;
    	float: left;	
    }
    Finally my script:
    Code:
    // JavaScript Document
    
    $(document).ready(function () {
    	
    	
    	$('#back').click(function (){
    	
    		$('#images').animate({"left": "+=757px"}, 1000);
    	})
    	
    	
    	$('#forward').click(function () {
    	
    		$('#images').animate({"left": "-=757px"}, 1000);
    		
    	 var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
    	
    	})
    	
    })
    Any suggestions?

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    ExplosiveHippo:

    Try the attached instead.

    No framework used.

    Demo: here
    Attached Files Attached Files
    Last edited by Sciliano; 12-15-2010 at 07:51 PM.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    ...or here's an endless looping slider tutorial I wrote.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,784
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    I’d suggest the cycle plugin. It’s the best.


  •  

    Posting Permissions

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