Posted By

mr_wza on 07/31/13


Tagged

jquery slideshow slider slide


Versions (?)

jQuery slider script


 / Published in: jQuery
 

  1. //usage
  2.  
  3. $('.slideshow ul').slider({
  4. leftTrigger: '.navleft',
  5. rightTrigger: '.navright',
  6. itemWidth: 918,
  7. slideSteps: 1,
  8. initPosition: 0
  9. });
  10.  
  11. //sliderfunction
  12.  
  13. (function($) {
  14. $.fn.slider = function(c) {
  15.  
  16. /**
  17.   * Variables and settings
  18.   *
  19.   */
  20.  
  21. var slider = $(this);
  22. var interval = '';
  23. var isAnimating = false;
  24. var settings = $.extend({
  25. autoSlide: true,
  26. autoSlideSpeed: 12000,
  27. slideSpeed: 700,
  28. itemWidth: 0,
  29. fullWidth: 0,
  30. maskWidth: 0,
  31. leftTrigger: '',
  32. rightTrigger: '',
  33. pauseTrigger: '',
  34.  
  35. slideSteps: 1, // nr slides that move in one go
  36. initPosition: 0 // 'center' or 0
  37. }, c);
  38.  
  39.  
  40. /**
  41.   * Slider
  42.   *
  43.   */
  44.  
  45. var disable = function(selector) {
  46. // disable trigger
  47. $(selector).addClass('disabled').css({'cursor':'default', 'opacity':0.3});
  48. };
  49.  
  50. var enable = function(selector) {
  51. // enable trigger
  52. $(selector).removeClass('disabled').css({'cursor':'pointer', 'opacity':1});
  53. };
  54.  
  55. var moveIt = function(direction) {
  56.  
  57. // check direction
  58. if(typeof(direction) == "undefined") direction = 1;
  59. if(isAnimating) return false;
  60.  
  61. // set vars
  62. isAnimating = true;
  63. var currentX = parseFloat(slider.css('marginLeft'));
  64. var newX = currentX + (-direction * settings.slideSteps * settings.itemWidth);
  65.  
  66. if(newX >= 0) {
  67. newX = 0; disable(settings.leftTrigger);
  68. } else {
  69. enable(settings.leftTrigger);
  70. };
  71. if(newX <= -(settings.fullWidth-settings.maskWidth)) {
  72. newX = -(settings.fullWidth)+(settings.maskWidth); disable(settings.rightTrigger);
  73. } else {
  74. enable(settings.rightTrigger);
  75. };
  76.  
  77. // move it
  78. slider.animate({ marginLeft: newX }, settings.slideSpeed, function() { isAnimating = false; });
  79.  
  80. };
  81.  
  82.  
  83. /**
  84.   * Add actions
  85.   *
  86.   */
  87.  
  88. return slider.each(function() {
  89.  
  90. // get and set widths
  91. // if(settings.itemWidth == 0) settings.itemWidth = parseFloat(slider.children(':first-child').width());
  92. if(settings.maskWidth == 0) settings.maskWidth = parseFloat(slider.parent().width());
  93. if(settings.fullWidth == 0) settings.fullWidth = settings.itemWidth * slider.children().size();
  94. $(this).css({ width: settings.fullWidth });
  95.  
  96.  
  97. // set initial position (0 or center)
  98. if (settings.initPosition!=0) {
  99. var initMargin = 0;
  100. if (settings.initPosition == 'center') {
  101. initMargin = -(settings.fullWidth) + ( settings.itemWidth * parseInt(slider.children().size()/2) );
  102. }
  103. if (settings.initPosition == 'random') {
  104. var randomNr = Math.floor(Math.random()*(slider.children().size()-4));
  105. //if( console.log ) console.log('random nr ' + randomNr);
  106. initMargin = -1*randomNr*(settings.itemWidth);
  107. }
  108. slider.css({ marginLeft: initMargin });
  109. }
  110.  
  111. // init button state
  112. if ( parseFloat(slider.css('marginLeft'))==0 ) { disable(settings.leftTrigger); }
  113. else if ( parseFloat(slider.css('marginLeft')) < -(settings.fullWidth-settings.maskWidth) ) disable(settings.rightTrigger);
  114.  
  115. // start interval
  116. if(settings.autoSlide) interval = setInterval(function() { moveIt(); }, settings.autoSlideSpeed);
  117.  
  118. // add actions
  119. $(settings.pauseTrigger).click(function() { clearInterval(interval); });
  120. $(settings.leftTrigger).click(function() { moveIt(-1); clearInterval(interval); });
  121. $(settings.rightTrigger).click(function() { moveIt(); clearInterval(interval); });
  122.  
  123. });
  124.  
  125. };
  126. })(jQuery);

Report this snippet  

You need to login to post a comment.