On gists

Jquery tiny slider - binding via events

JavaScript jQuery jQuery-plugins

slider.js Raw #

(function($) {
  $.fn.slideshow = function(options) {


  return this.each(function() {
    var $img = $(this),
      current = 0;

		  function show(index) {
		  var total = options.images.length;

		  while(index < 0)
      {
		    index += total;
        
      }
		  while(index >= total)
      {
		    index -= total;
        
      }
		  current = index;
		  $img.attr('src', options.images[index]);
		}

		function prev() {
		  show(current - 1);
		}

		function next() {
		  show(current + 1);
		}
    
      $img.bind('prev', prev)
      .bind('next', next)
      .bind('goto',function(e, index) {
  			show( index );
		});


    });



   
  };
})(jQuery);
    

usage.js Raw #

  var $image = $('#slideshow');


  $image.slideshow({
    images: ['1.png', '2.png', '3.png'],
    interval: 3000
  });

  $('#prev').click(function() {
    $image.trigger('prev');
  });

  $('#next').click(function() {
    $image.trigger('next');
  });


  $image.trigger('goto', 0);