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 2 of 2

Thread: jQuery Carousel

  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post

    jQuery Carousel

    Hi,

    I'm currently making a jQuery carousel. This is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
    
     <head> 
         <title>Conforming XHTML 1.0 Strict Template</title> 
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
         <script type="text/javascript"> 
             $(function() 
             { 
    
      $('div.showarea').fadeOut(0); 
         $('div.showarea:first').fadeIn(0); 
         
         $('a.leftarrow, a.rightarrow').click( function (ev) { 
             //prevent browser jumping to top 
             ev.preventDefault(); 
    
             //get current visible item 
             var $visibleItem = $('div.showarea:visible'); 
             
             //get total item count 
             var total =  $('div.showarea').length; 
    
             //get index of current visible item 
             var index = $visibleItem.prevAll().length; 
           var end = $visibleItem.nextAll().length; 
            
             //if we click next increment current index, else decrease index 
             $(this).attr('href') === '#carouselNext' ? index++ : index--; 
    
             //if we are now past the beginning or end show the last or first item 
             if (index === -1){ 
                index = total; 
             } 
           if (index === total) { 
           index = 0; 
           } 
            
             //hide current show item 
             $visibleItem.hide(); 
    
             //fade in the relevant item 
             $('div.showarea:eq(' + index + ')').fadeIn(0); 
         
         }); 
    
             }); 
         </script> 
     <style> 
     img{width:400px;height:400px;} 
     </style> 
     </head> 
    
     <body> 
         <div class="maincarousel"> 
            <div class="showarea">Hello, this is presentation number 1</div> 
            <div class="showarea">Another presentation</div> 
            <div class="showarea">Yeah, another presentation</div> 
           <br/> 
            <a href="#carouselPrev" class="leftarrow" title="Previous">Previous</a><br/> 
            <a href="#carouselNext" class="rightarrow" title="Next">Next</a> 
         </div> 
     </body> 
     </html>
    It works. However I'm trying to get it so that when it hits the end of the presentation it'll stop rather than go back to the beginning.

    Can anyone help me with this please?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    not exactly sure but, this is what you are going for. Should be easy enough to mod for your content:

    http://css-plus.com/examples/2010/09...-image-slider/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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