Posted By

nerdfiles on 08/26/10


Tagged

javascript plugin jquery carousel


Versions (?)

Quick Carousels in jQuery


 / Published in: JavaScript
 

Will pluginify and explain the initial state of the markup soon.

  1. <!-- Markup (you sort it out) -->
  2.  
  3. <ul class="page-carousel-container">
  4. <li class="carousel-item carousel-item-0 clearfix ">
  5. <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/259/fff') 0 0 no-repeat; ">
  6.  
  7. <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div>
  8. <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/metro-officially-uh-bound/" title="METRO officially UH-bound">
  9. <div class="carousel-text-container">
  10. <h3 class="no-margin">METRO officially UH-bound</h3>
  11. </div>
  12. </a>
  13. </div>
  14. </li>
  15.  
  16. <li class="carousel-item carousel-item-1 clearfix bleach">
  17. <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/3a4/fff') 0 0 no-repeat; ">
  18. <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div>
  19. <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/scholarship-awarded-to-student/" title="Scholarship awarded to student">
  20. <div class="carousel-text-container">
  21. <h3 class="no-margin">Scholarship awarded to student</h3>
  22. </div>
  23. </a>
  24.  
  25. </div>
  26. </li>
  27. <li class="carousel-item carousel-item-2 clearfix bleach">
  28. <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/e7/fff') 0 0 no-repeat; ">
  29. <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="news/" title="">news</a></div>
  30. <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">
  31. <div class="carousel-text-container">
  32. <h3 class="no-margin">Camp, fun provided for cancer stricken children</h3>
  33.  
  34. </div>
  35. </a>
  36. </div>
  37. </li>
  38. <li class="carousel-item carousel-item-3 clearfix bleach">
  39. <div class="carousel-item-container columns-8 begin" style="background: url('http://dummyimage.com/620x300/29c/fff') 0 0 no-repeat; ">
  40. <div class="carousel-item-category-container"><a class="carousel-item-category-link" href="faculty-staff/" title="">faculty-staff</a></div>
  41. <a class="carousel-item-title-link" href="http://thedailycougar.net/blog/2010/08/04/faculty-discuss-budget-furlough/" title="Faculty discuss budget, furlough">
  42.  
  43. <div class="carousel-text-container">
  44. <h3 class="no-margin">Faculty discuss budget, furlough</h3>
  45. </div>
  46. </a>
  47. </div>
  48. </li>
  49. </ul>
  50. </div>
  51.  
  52. <!-- JS -->
  53.  
  54. $('#page-carousel ul.page-carousel-container').each(function(e) {
  55. var carousel = $(this);
  56. carousel.find('li').first().addClass('carousel-item-visible');
  57. window.setInterval(function() {
  58.  
  59. var current = carousel.find('li.carousel-item-visible'),
  60. next = (carousel.find('li.carousel-item-visible').next().length > 0) ?
  61. carousel.find('li.carousel-item-visible').next() :
  62. carousel.find('li.carousel-item').first();
  63.  
  64. next.fadeIn("slow").removeClass("bleach").addClass('carousel-item-visible').queue(function() {
  65. current.fadeOut('slow').removeClass('carousel-item-visible');
  66. next.dequeue();
  67. });
  68.  
  69. }, 3000);
  70. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: nerdfiles on June 5, 2011

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

  • s fade out, to reveal
  • s underneath.

  • You need to login to post a comment.