/ Published in: JavaScript
Will pluginify and explain the initial state of the markup soon.
Expand |
Embed | Plain Text
<!-- Markup (you sort it out) --> <ul class="page-carousel-container"> <li class="carousel-item carousel-item-0 clearfix "> <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/259/fff') 0 0 no-repeat; "> <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div> <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/metro-officially-uh-bound/" title="METRO officially UH-bound"> <div class="carousel-text-container"> <h3 class="no-margin">METRO officially UH-bound</h3> </div> </a> </div> </li> <li class="carousel-item carousel-item-1 clearfix bleach"> <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/3a4/fff') 0 0 no-repeat; "> <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div> <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/scholarship-awarded-to-student/" title="Scholarship awarded to student"> <div class="carousel-text-container"> <h3 class="no-margin">Scholarship awarded to student</h3> </div> </a> </div> </li> <li class="carousel-item carousel-item-2 clearfix bleach"> <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/e7/fff') 0 0 no-repeat; "> <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div> <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/camp-fun-provided-for-cancer-stricken-children/" title="Camp, fun provided for cancer stricken children"> <div class="carousel-text-container"> <h3 class="no-margin">Camp, fun provided for cancer stricken children</h3> </div> </a> </div> </li> <li class="carousel-item carousel-item-3 clearfix bleach"> <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/29c/fff') 0 0 no-repeat; "> <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="faculty-staff/" title="">faculty-staff</a></div> <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/faculty-discuss-budget-furlough/" title="Faculty discuss budget, furlough"> <div class="carousel-text-container"> <h3 class="no-margin">Faculty discuss budget, furlough</h3> </div> </a> </div> </li> </ul> </div> <!-- JS --> $('#page-carousel ul.page-carousel-container').each(function(e) { var carousel = $(this); carousel.find('li').first().addClass('carousel-item-visible'); window.setInterval(function() { var current = carousel.find('li.carousel-item-visible'), next = (carousel.find('li.carousel-item-visible').next().length > 0) ? carousel.find('li.carousel-item-visible').next() : carousel.find('li.carousel-item').first(); next.fadeIn("slow").removeClass("bleach").addClass('carousel-item-visible').queue(function() { current.fadeOut('slow').removeClass('carousel-item-visible'); next.dequeue(); }); }, 3000); });
Comments
Subscribe to comments
You need to login to post a comment.

I've revised this. Its offset is confusing, and the initial CSS is necessary to understand it. Essentially,