Posted By

tonatiuh on 01/17/11


Tagged

plugin slider


Versions (?)

Slider


 / Published in: JavaScript
 

  1. // JScript source code
  2.  
  3. /*
  4. Créditos:
  5. Bases: Osiris Magro (http://innominepixel.wordpress.com)
  6. Creación de Plugin: Tonatiuh Núñez ([email protected])
  7. */
  8.  
  9. jQuery.fn.slider = function (options) {
  10. var defaults = {
  11. speed: 500,
  12. duration: 5000,
  13. width: 'auto',
  14. height: 'auto'
  15. };
  16. var options = jQuery.extend(defaults, options);
  17. var slides, timer;
  18. speed = options.speed;
  19. duration = options.duration;
  20. x = $(this).attr('id');
  21. $('#slider', this).css({ 'width': options.width, 'height': options.height, 'overflow': 'hidden' }); //Styling the slider
  22. slides = $('#slider .sliderContainer > .slide', this); // Getting the slide's collection
  23. slides.each(function () {
  24. $(this).css({ 'width': options.width, 'height': options.height, 'float': 'left' }); //Styling each slide
  25. });
  26. $('#slider .sliderContainer', this).css('width', slides[0].offsetWidth * slides.length); // Growing the slidesContainer which is gonna be moving
  27.  
  28. var oThis = $(this);
  29. function sliderScroll(direction) {
  30. position = $('#slider', oThis).scrollLeft();
  31. totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth
  32.  
  33. switch (direction) {
  34. case 'right':
  35. if (position + slides[0].offsetWidth > totalWidth) {
  36. $('#slider:not(:animated)', oThis).animate({ scrollLeft: 0 }, speed * (slides.length / 2));
  37. } else {
  38. $('#slider:not(:animated)', oThis).animate({ scrollLeft: position + slides[0].offsetWidth }, speed);
  39. }
  40. break;
  41.  
  42. case 'left':
  43. if (position - slides[0].offsetWidth < 0) {
  44. $('#slider:not(:animated)', oThis).animate({ scrollLeft: totalWidth }, speed * (slides.length / 2));
  45. } else {
  46. $('#slider:not(:animated)', oThis).animate({ scrollLeft: position - slides[0].offsetWidth }, speed);
  47. }
  48. break;
  49. }
  50.  
  51. }
  52.  
  53. function initTimer() {
  54. timer = setInterval(function () { sliderScroll('right'); }, options.duration);
  55. }
  56.  
  57. $('#next', this).click(function () {
  58. clearInterval(timer);
  59. sliderScroll('right');
  60. initTimer();
  61. return false;
  62. });
  63.  
  64. $('#prev', this).click(function () {
  65. clearInterval(timer);
  66. sliderScroll('left');
  67. initTimer();
  68. return false;
  69. });
  70.  
  71. initTimer();
  72. }

Report this snippet  

You need to login to post a comment.