elslider (v6)

Revision 6 of this benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  /*
   * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
   *
   * Uses the built in easing capabilities added In jQuery 1.1
   * to offer multiple easing options
   *
   * TERMS OF USE - jQuery Easing
   * 
   * Open source under the BSD License. 
   * 
   * Copyright © 2008 George McGinley Smith
   * All rights reserved.
   * 
   * Redistribution and use in source and binary forms, with or without modification, 
   * are permitted provided that the following conditions are met:
   * 
   * Redistributions of source code must retain the above copyright notice, this list of 
   * conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice, this list 
   * of conditions and the following disclaimer in the documentation and/or other materials 
   * provided with the distribution.
   * 
   * Neither the name of the author nor the names of contributors may be used to endorse 
   * or promote products derived from this software without specific prior written permission.
   * 
   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
   * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
   * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
   *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
   *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
   *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
   * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
   *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
   * OF THE POSSIBILITY OF SUCH DAMAGE. 
   *
  */

  // t: current time, b: begInnIng value, c: change In value, d: duration
  jQuery.easing['jswing'] = jQuery.easing['swing'];

  jQuery.extend(jQuery.easing, {
    def: 'easeOutQuad',
    swing: function(x, t, b, c, d) {
      //alert(jQuery.easing.default);
      return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    },
    easeInQuad: function(x, t, b, c, d) {
      return c * (t /= d) * t + b;
    },
    easeOutQuad: function(x, t, b, c, d) {
      return -c * (t /= d) * (t - 2) + b;
    },
    easeInOutQuad: function(x, t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
      return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInCubic: function(x, t, b, c, d) {
      return c * (t /= d) * t * t + b;
    },
    easeOutCubic: function(x, t, b, c, d) {
      return c * ((t = t / d - 1) * t * t + 1) + b;
    },
    easeInOutCubic: function(x, t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
      return c / 2 * ((t -= 2) * t * t + 2) + b;
    },
    easeInQuart: function(x, t, b, c, d) {
      return c * (t /= d) * t * t * t + b;
    },
    easeOutQuart: function(x, t, b, c, d) {
      return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeInOutQuart: function(x, t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
      return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    easeInQuint: function(x, t, b, c, d) {
      return c * (t /= d) * t * t * t * t + b;
    },
    easeOutQuint: function(x, t, b, c, d) {
      return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    easeInOutQuint: function(x, t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
      return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
    },
    easeInSine: function(x, t, b, c, d) {
      return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
    },
    easeOutSine: function(x, t, b, c, d) {
      return c * Math.sin(t / d * (Math.PI / 2)) + b;
    },
    easeInOutSine: function(x, t, b, c, d) {
      return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
    },
    easeInExpo: function(x, t, b, c, d) {
      return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
    },
    easeOutExpo: function(x, t, b, c, d) {
      return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
    },
    easeInOutExpo: function(x, t, b, c, d) {
      if (t == 0) return b;
      if (t == d) return b + c;
      if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    easeInCirc: function(x, t, b, c, d) {
      return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    },
    easeOutCirc: function(x, t, b, c, d) {
      return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
    },
    easeInOutCirc: function(x, t, b, c, d) {
      if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
    },
    easeInElastic: function(x, t, b, c, d) {
      var s = 1.70158;
      var p = 0;
      var a = c;
      if (t == 0) return b;
      if ((t /= d) == 1) return b + c;
      if (!p) p = d * .3;
      if (a < Math.abs(c)) {
        a = c;
        var s = p / 4;
      } else var s = p / (2 * Math.PI) * Math.asin(c / a);
      return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    easeOutElastic: function(x, t, b, c, d) {
      var s = 1.70158;
      var p = 0;
      var a = c;
      if (t == 0) return b;
      if ((t /= d) == 1) return b + c;
      if (!p) p = d * .3;
      if (a < Math.abs(c)) {
        a = c;
        var s = p / 4;
      } else var s = p / (2 * Math.PI) * Math.asin(c / a);
      return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
    },
    easeInOutElastic: function(x, t, b, c, d) {
      var s = 1.70158;
      var p = 0;
      var a = c;
      if (t == 0) return b;
      if ((t /= d / 2) == 2) return b + c;
      if (!p) p = d * (.3 * 1.5);
      if (a < Math.abs(c)) {
        a = c;
        var s = p / 4;
      } else var s = p / (2 * Math.PI) * Math.asin(c / a);
      if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
    },
    easeInBack: function(x, t, b, c, d, s) {
      if (s == undefined) s = 1.70158;
      return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOutBack: function(x, t, b, c, d, s) {
      if (s == undefined) s = 1.70158;
      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    easeInOutBack: function(x, t, b, c, d, s) {
      if (s == undefined) s = 1.70158;
      if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
      return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    easeInBounce: function(x, t, b, c, d) {
      return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b;
    },
    easeOutBounce: function(x, t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b;
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
      } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
      } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
      }
    },
    easeInOutBounce: function(x, t, b, c, d) {
      if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
      return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
    }
  });

/*
   *
   * TERMS OF USE - EASING EQUATIONS
   * 
   * Open source under the BSD License. 
   * 
   * Copyright © 2001 Robert Penner
   * All rights reserved.
   * 
   * Redistribution and use in source and binary forms, with or without modification, 
   * are permitted provided that the following conditions are met:
   * 
   * Redistributions of source code must retain the above copyright notice, this list of 
   * conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice, this list 
   * of conditions and the following disclaimer in the documentation and/or other materials 
   * provided with the distribution.
   * 
   * Neither the name of the author nor the names of contributors may be used to endorse 
   * or promote products derived from this software without specific prior written permission.
   * 
   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
   * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
   * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
   *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
   *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
   *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
   * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
   *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
   * OF THE POSSIBILITY OF SUCH DAMAGE. 
   *
   */
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ver 0.6a
// v0.6a
(function($) {
  $.fn.elSlider = function(options) {
    options = $.extend({
      visibleitems: 3,
      vertical: false,
      continuous: false,
      numbers: true,
      thumbs: true,
      fade: true,
      autoplay: false,
      autoplayspeed: 4000,
      animationspeed: 300,
      fadingspeed: 200,
      customeasing: "easeInOutExpo",
      // Choose Easing Method from JQuery Easing Plugin, "swing" and "linear" if no Easing Plugin available
      itemclass: ".sl_item",
      visiblecontainer: ".sl_visible",
      movingcontainer: ".sl_movingcontainer",
      leftarrow: ".sl_leftarrow a",
      rightarrow: ".sl_rightarrow a",
      numberscontainer: ".numbers ul",
      thumbscontainer: ".hiddenthumbs",
      bar: ".nav"
    }, options);
    return this.each(function() {

      // MAIN CONTAINERS
      var sl_item = $(options.itemclass, this);
      var sl_movingcontainer = $(options.movingcontainer, this);
      var sl_visiblecontainer = $(options.visiblecontainer, this);
      var sl_leftarrow = $(options.leftarrow, this);
      var sl_rightarrow = $(options.rightarrow, this);
      var sl_numberscontainer = $(options.numberscontainer, this);
      var sl_thumbscontainer = $(options.thumbscontainer, this);
      var sl_bar = $(options.bar, this);

      // FURTHER VARIABLES
      var sl_itemcount = $(sl_movingcontainer).children().length;
      var sl_itemwidth = $(sl_item).outerWidth();
      var sl_itemwidthpxpos = sl_itemwidth + "px";
      var sl_itemwidthpxneg = "-" + sl_itemwidth + "px";
      var sl_itemheight = $(sl_item).outerHeight();
      var sl_itemheightpxpos = sl_itemheight + "px";
      var sl_itemheightpxneg = "-" + sl_itemheight + "px";
      var sl_visibleitems = options.visibleitems;
      var sl_visiblewidth = sl_visibleitems * sl_itemwidth;

      var sl_currentpos = 0;
      var sl_arrowwidth = $(options.leftarrow, this).width();
      var sl_totalwidth = sl_visiblewidth;
      var sl_vertical = options.vertical;
      var sl_continuous = options.continuous;
      var sl_numbers = options.numbers;
      var sl_thumbs = options.thumbs;
      var sl_animationspeed = options.animationspeed;
      var sl_fadingspeed = options.fadingspeed;

      var arguments = new Object;
      var sl_cont_dir = "";
      var sl_aniarg_right = {};
      var sl_aniarg_left = {};

      var lastitem = false;
      var firstitem = false;

      // ************* DEFINE ARGUMENTS FOR ANIMATION *************** //

      function defineArgs(times) {
        if (sl_vertical == true) {
          $(sl_item).css({
            "float": "none"
          });
          $(sl_visiblecontainer).css({
            "height": sl_itemheight * sl_visibleitems
          });
          sl_aniarg_right["top"] = "-=" + sl_itemheight * times;
          sl_aniarg_right["queue"] = false;
          sl_aniarg_left["top"] = "+=" + sl_itemheight * times;
          sl_aniarg_left["queue"] = false;
          sl_cont_dir = "top";
        } else {
          sl_aniarg_right["left"] = "-=" + sl_itemwidth * times;
          sl_aniarg_right["queue"] = false;
          sl_aniarg_left["left"] = "+=" + sl_itemwidth * times;
          sl_aniarg_left["queue"] = false;
          sl_cont_dir = "left";
        }
      }

      defineArgs(1);

      // APPLY TOTAL WIDTH ON SLIDER AND VISIBLE WIDTH ON VISIBLECONTAINER,
      // HIDE ARROW IF CONTINUOUS IS FALSE
      $(sl_visiblecontainer).width(sl_visiblewidth);
      if (sl_continuous == false) {
        $(sl_leftarrow).addClass("ishidden");
      }

      // ***************** FADE FUNCTION ****************** //

      function Fade(direction, speed, times) {
        $(sl_movingcontainer).fadeOut(speed, function() {
          if (direction == "right") {
            FadeToRight(times);
          } else {
            FadeToLeft(times);
          }
        });
        $(sl_movingcontainer).fadeIn(speed);
      }

      /* BRUENDL */

      var heading = $(".btn-info-block", sl_item);

      /* BRUENDL END */


      // *************** SLIDE FUNCTION ****************** //

      function Slide(direction, speed, times) {

        defineArgs(times);
        if (direction == "right") {
          arguments = sl_aniarg_right;
        } else {
          arguments = sl_aniarg_left;
        }
        if (firstitem == true) {
          if (sl_vertical == false) {
            $(sl_movingcontainer).css("left", sl_itemwidthpxneg);
          } else {
            $(sl_movingcontainer).css("top", sl_itemheightpxneg);
          }
        }

        var customeasing = options.customeasing;

        $(".stresslayer").show();

        /* BRUENDL */

        heading.fadeOut(0);

        /* BRUENDL END */

        $(sl_movingcontainer).stop(false, false).animate(
        arguments, speed, customeasing, function() {

          //$(".stresslayer").hide();
          if (lastitem == true || firstitem == true) {
            if (direction == "right") {
              if (sl_vertical == false) {
                $(sl_movingcontainer).css("left", "0px");
              } else {
                $(sl_movingcontainer).css("top", 0);
              }
              lastitem = false;

              $(sl_item.eq(sl_itemcount)).remove();
            }
            if (direction == "left") {
              $(".sl_item:eq(0)", this).remove();
              if (sl_vertical == false) {
                var fromleft = (sl_itemwidth * (sl_itemcount - 1)) * -1;
                $(sl_movingcontainer).css("left", fromleft + "px");
              } else {
                var fromtop = (sl_itemheight * (sl_itemcount - 1)) * -1;
                $(sl_movingcontainer).css("top", fromtop + "px");
              }
              firstitem = false;
            }
          }

          /* BRUENDL */

          heading.fadeIn(500);

          /* BRUENDL END */

        });
      }

      // ************** ANIMATE FUNCTION ************** // differs between slide and fade

      function Animation(direction, fade, times) {

        if (sl_continuous == false) {
          if (direction == "right") {
            if ($(sl_leftarrow).hasClass("ishidden")) {
              $(sl_leftarrow).removeClass("ishidden");
            }
          } else {
            if ($(sl_rightarrow).hasClass("ishidden")) {
              $(sl_rightarrow).removeClass("ishidden");
            }
          }
        }

        // Position Adjustments

        function AppendFirstItem() {
          lastitem = true;
          var firstitemtomove = $(sl_item.eq(0));
          $(firstitemtomove).clone().appendTo(sl_movingcontainer);
        }

        function PrependLastItem() {
          firstitem = true;
          var lastitemtomove = $(sl_item.eq(sl_itemcount - 1));
          $(lastitemtomove).clone().prependTo(sl_movingcontainer);

        }

        if (direction == "right") {
          if (sl_continuous == false) {
            sl_currentpos = sl_currentpos + (1 * times);
            if (sl_currentpos > 0) {
              $(sl_leftarrow).removeClass("ishidden");
            }
            if (sl_currentpos == (sl_itemcount - sl_visibleitems)) {
              $(sl_rightarrow).addClass("ishidden");
            }
          } else {
            if ((sl_currentpos + 1) == sl_itemcount) {
              AppendFirstItem();
            }
            sl_currentpos++;
            if (sl_currentpos == sl_itemcount) {
              sl_currentpos = 0;
            }

          }
        } else {
          if (sl_continuous == false) {
            sl_currentpos = sl_currentpos - (1 * times);
            if (sl_currentpos == 0) {
              $(sl_leftarrow).addClass("ishidden");
            }
          } else {

            if ((sl_currentpos) == 0) {
              PrependLastItem();
            }
            sl_currentpos--;
            if (sl_currentpos == -1) {
              sl_currentpos = (sl_itemcount - 1);
            }


          }
        }

        if (fade == true) {
          Fade(direction, sl_fadingspeed, times);
        } else {
          Slide(direction, sl_animationspeed, times);
        }

        // Thumb Adjustments
        if (sl_thumbs == true) {
          $(".thumb", sl_thumbscontainer).removeClass("current");
          $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
        }

        // Nr Adjustments
        if (sl_numbers == true) {
          $("li.current", sl_numberscontainer).removeClass("current");
          $("li:eq(" + (sl_currentpos) + ")", sl_numberscontainer).addClass("current");
        }

        return false;

      }

      ;

      // CLICK RIGHT ARROW
      $(sl_rightarrow).click(

      function() {
        StopInterval();
        Animation("right", false, 1);
        return false;
      })

      // CLICK LEFT ARROW
      $(sl_leftarrow).click(

      function() {
        StopInterval();
        Animation("left", false, 1);
        return false;
      })

      // APPEND NUMBERS
      if (sl_numbers == true) {
        for (i = 1; i <= sl_itemcount; i++) {
          $(sl_numberscontainer).append("<li><div class='stresslayer'></div><a href='#' >" + i + "</a></li>");
        }
        $("li:eq(0)", sl_numberscontainer).addClass("current");
      }

      // NUMBERS CLICK FUNCTIONS
      $("li a", sl_numberscontainer).bind({

        click: function() {

          StopInterval();
          var currentnr = 0;
          for (i = 0; i < sl_itemcount; i++) {
            var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
            if (thisclass == "current") {
              var currentnr = i;
              break;
            }
          }

          $("li", sl_numberscontainer).removeClass("current");
          $(this).parent().addClass("current");

          var clickpos = 0;

          for (i = 0; i < sl_itemcount; i++) {
            var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
            if (thisclass == "current") {
              var clickpos = i;
              break;
            }
          }

          /* TECHNODAT BEGIN */

          var currentimg = images[i];


          $("<img />").prependTo("#background_container").attr("src", currentimg);
          $('#background_container').onImagesLoad({
            selectorCallback: function() {
              $("<div class='bgimage'>").prependTo("#background_container").attr("style", "background-image: url(" + currentimg + ");");
              $("img", "#background_container").remove();
              $(".stresslayer").show();
              $("#background_container .bgimage:last").fadeOut(600, function() {
                $("#background_container .bgimage:last").remove();
                $(".stresslayer").hide();
              });
            }
          });

          /* TECHNODAT END */

          var difference = currentnr - clickpos;
          difference = Math.abs(difference);

          if (currentnr > clickpos) {
            for (i = 1; i <= difference; i++) {
              Animation("left", false, difference);
            }
          } else {
            for (i = 1; i <= difference; i++) {
              Animation("right", false, difference);
            }
          }

          if (sl_numbers == true) {
            $("li.current", sl_numberscontainer).removeClass("current");
            $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
          }

          sl_currentpos = clickpos;

          if (sl_thumbs == true) {
            $(".thumb", sl_thumbscontainer).removeClass("current");
            $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
          }

          return false;

        }
      });

      // SHOW THUMBNAILS
      if (sl_thumbs == true) {
        $(sl_bar).hover(function() {
          $(sl_thumbscontainer).fadeIn("fast");
        }, function() {
          $(sl_thumbscontainer).fadeOut("fast");
        });
      }

      // THUMBNAIL CLICK FUNCTIONS
      $(".thumb a", sl_thumbscontainer).bind({

        click: function() {

          StopInterval();
          var currentthumb = 0;
          for (i = 0; i < sl_itemcount; i++) {
            var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
            if (thisclass == "thumb current") {
              var currentthumb = i;
              break;
            }
          }

          $(".thumb", sl_thumbscontainer).removeClass("current");
          $(this).parent().addClass("current");

          var clickpos = 0;

          for (i = 0; i < sl_itemcount; i++) {
            var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
            if (thisclass == "thumb current") {
              var clickpos = i;
              break;
            }
          }

          var difference = currentthumb - clickpos;
          difference = Math.abs(difference);

          if (currentthumb > clickpos) {
            for (i = 1; i <= difference; i++) {
              Animation("left", false, difference);
            }
          } else {
            for (i = 1; i <= difference; i++) {
              Animation("right", false, difference);
            }
          }

          if (sl_numbers == true) {
            $("li.current", sl_numberscontainer).removeClass("current");
            $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
          }

          sl_currentpos = clickpos;

          if (sl_thumbs == true) {
            $(".thumb", sl_thumbscontainer).removeClass("current");
            $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
          }

          return false;
        }
      });

      // AUTOPLAY FUNCTION
      if (options.autoplay == true) {
        function AnimateThis() {
          Animation("right", false, 1);
        }

        var interval = setInterval(AnimateThis, options.autoplayspeed);
      }

      function StopInterval() {
        interval = clearInterval(interval);
      }


    });
  };
})(jQuery);
ready
ver5
// v4 (rev 2, 10.10.2011)
(function(jQuery) {

  jQuery.fn.elSlider = function(options) {

    options = jQuery.extend({

      visibleitems: 1,
      // set simultaneously visible items, default 1
      vertical: false,
      // set sliding animation to vertical, default false
      continuous: false,
      // set continuous sliding, default false
      numbers: true,
      // set display of numbers, default true
      thumbs: true,
      // set display of thumbs, default true
      fade: false,
      // set fading animation, default false
      autoplay: false,
      // set autoplay, default false
      autoplayspeed: 4000,
      // set autoplay speed, default 4000ms
      animationspeed: 300,
      // set sliding animation speed, default 300ms
      fadingspeed: 200,
      // set fading animation speed, default 200
      customeasing: "easeInOutExpo",
      // Choose Easing Method from JQuery Easing Plugin, "swing" and "linear" if no Easing Plugin available
      itemclass: ".sl_item",
      visiblecontainer: ".sl_visible",
      movingcontainer: ".sl_movingcontainer",
      leftarrow: ".sl_leftarrow",
      rightarrow: ".sl_rightarrow",
      numberscontainer: ".numbers",
      thumbscontainer: ".hiddenthumbs",
      bar: ".nav"

    }, options);

    return this.each(function() {

      // MAIN CONTAINERS
      var sl_item = jQuery(options.itemclass, this),
          sl_movingcontainer = jQuery(options.movingcontainer, this),
          sl_visiblecontainer = jQuery(options.visiblecontainer, this),
          sl_leftarrow = jQuery(options.leftarrow, this),
          sl_rightarrow = jQuery(options.rightarrow, this),
          sl_numberscontainer = jQuery(options.numberscontainer, this),
          sl_thumbscontainer = jQuery(options.thumbscontainer, this),
          sl_number = jQuery($("a"), sl_numberscontainer),
          sl_thumb = jQuery($(".thumb a"), sl_thumbscontainer),
          sl_bar = jQuery(options.bar, this);


      // FURTHER VARIABLES
      var sl_itemcount = sl_movingcontainer.children().length,
          sl_itemwidth = sl_item.outerWidth(),
          sl_itemwidthpxneg = "-" + sl_itemwidth + "px",
          sl_itemheight = sl_item.outerHeight(),
          sl_itemheightpxneg = "-" + sl_itemheight + "px",
          sl_visibleitems = options.visibleitems,
          sl_visiblewidth = sl_visibleitems * sl_itemwidth;

      var sl_currentpos = 0,
          sl_vertical = options.vertical,
          sl_continuous = options.continuous,
          sl_numbers = options.numbers,
          sl_thumbs = options.thumbs,
          sl_animationspeed = options.animationspeed,
          sl_fadingspeed = options.fadingspeed;

      var arguments = new Object,
          sl_cont_dir = "",
          sl_aniarg_right = {},
          sl_aniarg_left = {};

      var lastitem = false,
          firstitem = false;


      // SET CONTAINERWIDTH / HIDE ARROW
      sl_visiblecontainer.width(sl_visiblewidth);
      if (sl_continuous == false) {
        sl_leftarrow.addClass("ishidden");
      }

      // SHOW THUMBNAILS
      if (sl_thumbs == true) {
        sl_bar.hover(function() {
          sl_thumbscontainer.fadeIn("fast");
        }, function() {
          sl_thumbscontainer.fadeOut("fast");
        });
      }

      // DEFINE ARGUMENTS-OBJECT FOR ANIMATION

      function defineArgs(times) {
        if (sl_vertical == true) {
          sl_item.css({
            "float": "none"
          });
          sl_visiblecontainer.css({
            "height": sl_itemheight * sl_visibleitems
          });
          sl_aniarg_right["top"] = "-=" + sl_itemheight * times;
          sl_aniarg_right["queue"] = false;
          sl_aniarg_left["top"] = "+=" + sl_itemheight * times;
          sl_aniarg_left["queue"] = false;
          sl_cont_dir = "top";
        } else {
          sl_aniarg_right["left"] = "-=" + sl_itemwidth * times;
          sl_aniarg_right["queue"] = false;
          sl_aniarg_left["left"] = "+=" + sl_itemwidth * times;
          sl_aniarg_left["queue"] = false;
          sl_cont_dir = "left";
        }
      }

      defineArgs(1);

      // GENERAL ANIMATION CONTROLLER

      function Animation(direction, fade, times) {


        var currentbefore = sl_currentpos;

        if (sl_continuous == false) {
          if (direction == "right") {
            if (sl_leftarrow.hasClass("ishidden")) {
              sl_leftarrow.removeClass("ishidden");
            }
          } else {
            if (sl_rightarrow.hasClass("ishidden")) {
              sl_rightarrow.removeClass("ishidden");
            }
          }
        }

        // Position Adjustments

        function AppendFirstItem() {
          lastitem = true;
          var firstitemtomove = sl_item.eq(0);
          firstitemtomove.clone().appendTo(sl_movingcontainer);
        }

        function PrependLastItem() {
          firstitem = true;
          var lastitemtomove = sl_item.eq(sl_itemcount - 1);
          lastitemtomove.clone().prependTo(sl_movingcontainer);

        }

        if (direction == "right") {
          if (sl_continuous == false) {
            sl_currentpos = sl_currentpos + (1 * times);
            if (sl_currentpos > 0) {
              sl_leftarrow.removeClass("ishidden");
            }
            if (sl_currentpos == (sl_itemcount - sl_visibleitems)) {
              sl_rightarrow.addClass("ishidden");
            }
          } else {
            sl_currentpos = (sl_currentpos - 1) + (1 * times);
            if ((sl_currentpos + 1) == sl_itemcount) {
              AppendFirstItem();
            }
            sl_currentpos++;
            if (sl_currentpos == sl_itemcount) {
              sl_currentpos = 0;
            }

          }
        } else {
          if (sl_continuous == false) {
            sl_currentpos = sl_currentpos - (1 * times);
            if (sl_currentpos == 0) {
              sl_leftarrow.addClass("ishidden");
            }
          } else {
            sl_currentpos = (sl_currentpos + 1) - (1 * times);
            if ((sl_currentpos) == 0) {
              PrependLastItem();
            }
            sl_currentpos--;
            if (sl_currentpos <= -1) {
              sl_currentpos = (sl_itemcount - 1);
            }


          }
        }

        if (options.fade == true) {
          Fade(direction, sl_fadingspeed, times, currentbefore);
        } else {
          Slide(direction, sl_animationspeed, times);
        }

        // Thumb and Nr Adjustment
        if (sl_thumbs == true) {
          sl_thumb.removeClass("current");
          jQuery(".thumb a:eq(" + (sl_currentpos) + ")").addClass("current");
          if (sl_numbers == true) {
            sl_number.removeClass("current");
            jQuery(".nr a:eq(" + (sl_currentpos) + ")", sl_numberscontainer).addClass("current");
          }
        }

        if (sl_numbers == true) {
          sl_number.removeClass("current");
          jQuery(".nr a:eq(" + (sl_currentpos) + ")", sl_numberscontainer).addClass("current");
          if (sl_thumbs == true) {
            sl_thumb.removeClass("current");
            jQuery(".thumb a:eq(" + (sl_currentpos) + ")").addClass("current");
          }
        }

        return false;

      }

      // FADE ANIMATION

      function Fade(direction, speed, times, startingpos) {
        if (direction == "right") {
          $(".sl_item:eq(" + startingpos + ")").clone().appendTo(sl_visiblecontainer).fadeOut(sl_fadingspeed, function() {
            $(this).remove();
          });
          Slide("right", 0, times);

        } else {
          $(".sl_item:eq(" + (startingpos) + ")").clone().appendTo(sl_visiblecontainer).fadeOut(sl_fadingspeed, function() {
            $(this).remove();
          });
          Slide("left", 0, times);
        }
      }

      // SLIDE ANIMATION

      function Slide(direction, speed, times) {

        defineArgs(times);
        if (direction == "right") {
          arguments = sl_aniarg_right;
        } else {
          arguments = sl_aniarg_left;
        }
        if (firstitem == true) {
          if (sl_vertical == false) {
            sl_movingcontainer.css("left", sl_itemwidthpxneg);
          } else {
            sl_movingcontainer.css("top", sl_itemheightpxneg);
          }
        }

        var customeasing = options.customeasing;
        sl_movingcontainer.stop(false, false).animate(
        arguments, speed, customeasing, function() {
          if (lastitem == true || firstitem == true) {
            if (direction == "right") {
              if (sl_vertical == false) {
                sl_movingcontainer.css("left", "0px");
              } else {
                sl_movingcontainer.css("top", 0);
              }
              lastitem = false;

              jQuery(".sl_item:eq(" + sl_itemcount + ")").remove();
            }
            if (direction == "left") {
              jQuery(".sl_item:eq(0)", this).remove();
              if (sl_vertical == false) {
                var fromleft = (sl_itemwidth * (sl_itemcount - 1)) * -1;
                sl_movingcontainer.css("left", fromleft + "px");
              } else {
                var fromtop = (sl_itemheight * (sl_itemcount - 1)) * -1;
                sl_movingcontainer.css("top", fromtop + "px");
              }
              firstitem = false;
            }
          }
        });

      }

      // CLICK ON ITEM

      function clickOnItem(item, number) {

        if (jQuery(sl_movingcontainer + ':animated').length) {
          return false;
        }
        StopInterval();
        if (number == true) {
          var sl_clickpos = (parseInt(item.html())) - 1;
        } else {
          var sl_clickpos = (parseInt($("span.th_nr", item).html())) - 1;
        }
        var difference = sl_currentpos - sl_clickpos;
        difference = Math.abs(difference);
        if (sl_currentpos > sl_clickpos) {
          Animation("left", false, difference);
        } else {
          Animation("right", false, difference);
        }
      }

      // NUMBERS CLICK
      $("a", sl_numberscontainer).bind("click", function() {
        clickOnItem($(this), true);
        return false;
      });

      // THUMBNAIL CLICK
      sl_thumb.bind("click", function() {
        clickOnItem($(this), false);
        return false;
      });

      // RIGHT AND LEFT ARROW CLICK
      sl_rightarrow.bind({
        click: function() {
          if (jQuery(sl_movingcontainer + ':animated').length) {
            return false;
          }
          StopInterval();
          Animation("right", false, 1);
          return false;
        }
      });

      sl_leftarrow.bind({

        click: function() {
          if (jQuery(sl_movingcontainer + ':animated').length) {
            return false;
          }
          StopInterval();
          Animation("left", false, 1);
          return false;
        }
      });

      // AUTOPLAY
      if (options.autoplay == true) {
        function AnimateThis() {
          Animation("right", false, 1);
        }

        var interval = setInterval(AnimateThis, options.autoplayspeed);
      }

      function StopInterval() {
        interval = clearInterval(interval);
      }

    });

  };

})(jQuery);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.