Jquery Carousel not "Carouselling"

Discussion in 'jQuery' started by d0cpaul, Dec 14, 2010.

  1. #1
    For some reason my carousel is not "carouselling" or auto scrolling like its suppose...

    Here is the link to my site so you can see it in action:
    http://michiganloanmodification.net/

    I'm pretty new to jquery so I here is my .js file:

    jQuery(document).ready(function($) {
    	$.fn.infinite = function () {
    	 
    	    function repeat(str, num) {
    	        return new Array( num + 1 ).join( str );
    	    }
    	  
    	    return this.each(function () {
    	        var $carousel = $('> div', this).css('overflow', 'hidden'),
    	            $slider = $carousel.find('> ul'),
    	            $items = $slider.find('> li'),
    	            $single = $items.filter(':first'),
    	            
    	            singleWidth = $single.outerWidth(), 
    	            visible = Math.ceil($carousel.innerWidth() / singleWidth), // note: doesn't include padding or border
    	            currentPage = 1,
    	            pages = Math.ceil($items.length / visible);            
    	 
    	 
    	        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
    	        if (($items.length % visible) != 0) {
    	            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
    	            $items = $slider.find('> li');
    	        }
    	 
    	        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
    	        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
    	        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
    	        $items = $slider.find('> li'); // reselect
    	        
    	        // 3. Set the left position to the first 'real' item
    	        $carousel.scrollLeft(singleWidth * visible);
    	        
    	        // 4. paging function
    	        function gotoPage(page) {
    	            var dir = page < currentPage ? -1 : 1,
    	                n = Math.abs(currentPage - page),
    	                left = singleWidth * dir * visible * n;
    	            
    	            $carousel.filter(':not(:animated)').animate({
    	                scrollLeft : '+=' + left
    	            }, 500, function () {
    	                if (page == 0) {
    	                    $carousel.scrollLeft(singleWidth * visible * pages);
    	                    page = pages;
    	                } else if (page > pages) {
    	                    $carousel.scrollLeft(singleWidth * visible);
    	                    // reset back to start position
    	                    page = 1;
    	                } 
    	 
    	                currentPage = page;
    	            });                
    	            
    	            return false;
    	        }
    			
    			
    	        
    	        $carousel.after('<a class="arrow back"></a><a class="arrow forward"></a>');
    	        
    	        // 5. Bind to the forward and back buttons
    	        $('a.back', this).click(function () {
    	            return gotoPage(currentPage - 1);                
    	        });
    	        
    	        $('a.forward', this).click(function () {
    	            return gotoPage(currentPage + 1);
    	        });
    	        
    	        // create a public interface to move to a specific page
    	        $(this).bind('goto', function (event, page) {
    	            gotoPage(page);
    	        });
    	    });  
    	};
    });
    
    jQuery(document).ready(function($) { 
    	$(document).ready(function () {
    	  $('.infinite').infinite();
    	});
    });
    Code (markup):
    and here is the HTML:

    	<div id="carousel">
    	<div id="carousel-inside">
    		<div class="infinite">
    			<div class="carousel">
    
    				<ul>		
    					                    
    					<li>
    												<a class="post-frame-carousel 61" href="http://sandiegonow.tv/news/marye-anne-fox-university-of-california-san-diego-awarded-the-national-medal-of-science/" title="Marye Anne Fox, University of California San Diego Awarded the National..."></a>
    													
    						<img width="230" height="170" src="http://sandiegonow.tv/news/files/2010/11/Obama-230x170.jpg" class="attachment-featured wp-post-image" alt="Obama" title="Obama" />						<h2 class="carousel-title"><a href="http://sandiegonow.tv/news/marye-anne-fox-university-of-california-san-diego-awarded-the-national-medal-of-science/" title="Marye Anne Fox, University of California San Diego Awarded the National Medal of Science">Marye Anne Fox, University of California San Diego Awarded the National...</a></h2>
    					</li>
    					
    					<div class="instant">
    						<div id="video-carousel-61" class="instant-view">
    													</div>
    					</div>
    
    					
    					                    
    					<li>
    												<a class="post-frame-carousel 49" href="http://sandiegonow.tv/news/mohit-a-khanna-sentenced-to-41-months-federal-prison/" title="Mohit A. Khanna Sentenced to 41 Months Federal Prison"></a>
    													
    						<img width="230" height="170" src="http://sandiegonow.tv/news/files/2010/11/Fotolia_125238_XS-230x170.jpg" class="attachment-featured wp-post-image" alt="MAK 1 Mohit Khanna" title="MAK 1 Mohit Khanna" />						<h2 class="carousel-title"><a href="http://sandiegonow.tv/news/mohit-a-khanna-sentenced-to-41-months-federal-prison/" title="Mohit A. Khanna Sentenced to 41 Months Federal Prison">Mohit A. Khanna Sentenced to 41 Months Federal Prison</a></h2>
    					</li>
    					
    					<div class="instant">
    						<div id="video-carousel-49" class="instant-view">
    													</div>
    					</div>
    
    					
    					                    
    					<li>
    												<a class="post-frame-carousel 44" href="http://sandiegonow.tv/news/united-brands-joose-and-max/" title="United Brands Targeted by FTC for Joose and Max Alcohol Energy Drink"></a>
    													
    						<img width="230" height="170" src="http://sandiegonow.tv/news/files/2010/11/Joose-230x170.jpg" class="attachment-featured wp-post-image" alt="Joose" title="Joose" />						<h2 class="carousel-title"><a href="http://sandiegonow.tv/news/united-brands-joose-and-max/" title="United Brands Targeted by FTC for Joose and Max Alcohol Energy Drink">United Brands Targeted by FTC for Joose and Max Alcohol Energy Drink</a></h2>
    					</li>
    					
    					<div class="instant">
    						<div id="video-carousel-44" class="instant-view">
    													</div>
    					</div>
    
    					
    					                    
    					<li>
    												<a class="post-frame-carousel 35" href="http://sandiegonow.tv/news/san-diego-woman-charged-with-conspiracy-to-provide-material-support-to-al-shabaab/" title="San Diego Woman Charged with Conspiracy to Provide Material Support to al Shabaab"></a>
    													
    						<img width="230" height="170" src="http://sandiegonow.tv/news/files/2010/11/Customs_and_Border_Protection-230x170.jpg" class="attachment-featured wp-post-image" alt="Customs_and_Border_Protection" title="Customs_and_Border_Protection" />						<h2 class="carousel-title"><a href="http://sandiegonow.tv/news/san-diego-woman-charged-with-conspiracy-to-provide-material-support-to-al-shabaab/" title="San Diego Woman Charged with Conspiracy to Provide Material Support to al Shabaab">San Diego Woman Charged with Conspiracy to Provide Material Support to al Shabaab</a></h2>
    					</li>
    					
    					<div class="instant">
    						<div id="video-carousel-35" class="instant-view">
    													</div>
    					</div>
    
    					
    						                				</ul>        
    			</div> <!-- carousel -->
    		</div> <!-- infinite -->
    	</div> <!-- carousel-inside -->
    </div> <!-- carousel -->
    Code (markup):

     
    d0cpaul, Dec 14, 2010 IP