1k Image/Content Slider with auto rotator


/ Published in: jQuery
Save to your folder(s)

Small image- and content slider with menu generation and auto-rotator.
The auto-rotator stops, when menu is clicked. Text of the menu is taken from the title-tag of the image(can easily be changed!). Minified size < 1kb.

Call it with
$('.someClass').joeSlide();


Copy this code and paste it in your HTML
  1. HTML:
  2. <div class="someClass">
  3. <ul class="sliderContent">
  4. <li>Slide 1 <img src="image1.jpg" title="Title 1" /></li>
  5. <li>Slide 2 ...</li>
  6. </ul>
  7. </div>
  8. CSS(just as i used it):
  9. .someClass { height:320px; background:url('../images/bg_slider.gif') repeat-x; position:relative; }
  10. .someClass ul { list-style:none; }
  11. .sliderContent { position:relative; height:300px; width:960px; margin:8px 0; margin:0; padding-top:10px; overflow:hidden;}
  12. .sliderThumbs { position:absolute; bottom:10px; }
  13. .sliderThumbs li { float:left; width:192px; height:54px; text-align:center; line-height:60px; cursor:pointer; background:url('../images/buttons_slider.png') no-repeat scroll right 10px transparent }
  14. .sliderThumbs li:hover { background-position:right -44px; }
  15. .sliderThumbs li.active{ background-position:right -98px; }
  16.  
  17. jQuery Function:
  18. (function($){
  19. $.fn.extend({
  20. joeSlide: function() {
  21. return this.each(function() {
  22. var t;
  23. var obj = $(this);
  24.  
  25. obj.append('<ul class="sliderThumbs">');
  26. $('li', obj).each(function (index) {
  27. $('.sliderThumbs', obj).append('<li>' + $(this).children('img').attr('alt') + '</li>');
  28. });
  29. $('.sliderThumbs li', obj).last().addClass('active');
  30.  
  31. $('.sliderThumbs li', obj).live('click', function(){
  32. clearTimeout(t);
  33.  
  34. if( $('.sliderContent li:visible', obj).index() > $(this).index() )
  35. $('.sliderContent li', obj).eq($(this).index()).show().siblings().fadeOut(600);
  36. else
  37. $('.sliderContent li', obj).eq($(this).index()).fadeIn(600, function(){ $(this).siblings().hide(); });
  38.  
  39. $('.sliderThumbs li.active', obj).removeClass('active');
  40. $(this).addClass('active', obj);
  41. });
  42.  
  43. var sliderNext = function() {
  44. if(!$(".sliderThumbs li", obj).last().hasClass('active'))
  45. $(".sliderThumbs li.active", obj).next().click();
  46. else
  47. $(".sliderThumbs li", obj).eq(0).click();
  48.  
  49. t = setTimeout(sliderNext, 5000);
  50. }
  51. sliderNext();
  52. });
  53. }
  54. });
  55. })(jQuery);

URL: http://t3.madcity.at

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.