elslider (v8)

Revision 8 of this benchmark created on

Preparation HTML

doctype html>
<html lang="en" class="no-js">
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
      elSlider
    </title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <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>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/elslider.css">
  </head>
  
  <body>
    <h1>
      elSlider
    </h1>
    <div class="elslider">
      <div class="sl_visible">
        <div class="sl_movingcontainer">
          <div class="nr_1 sl_item">
            <a href="#" class="lightbox">
            <img alt="" src="img/australia.jpg"/>
            <span class="zoom">1</span>
            </a>
          </div>
          <div class="nr_2 sl_item">
            <a href="#" class="lightbox">
            <img alt="" src="img/newzealand.jpg"/>
            <span class="zoom">2</span>
            </a>
          </div>
          <div class="nr_3 sl_item">
            <a href="#" class="lightbox">
            <img alt="" src="img/nepal.jpg"/>
            <span class="zoom">3</span>
            </a>
          </div>
          <div class="nr_4 sl_item">
            <a href="#" class="lightbox">
            <img alt="" src="img/gobi.jpg"/>
            <span class="zoom">4</span>
            </a>
          </div>
        </div>
      </div>
      <!-- LEFT / RIGHT ARROWS -->
      <div class="sl_leftarrow">
        <a href="#"></a>
      </div>
      <div class="sl_rightarrow">
        <a href="#"></a>
      </div>
      <!-- NAV BAR INCL. NUMBERS / THUMBNAILS -->
      <div class="nav">
        <div class="hiddenthumbs">
          <div class="thumbslider">
            <div class="sl_thumbs" data-nr="1">
              <div class="thumb">
                <a href="#" class="current">
                <span class="th_nr">1</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">2</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">3</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">4</span>
                <img alt="" src=""/>
                </a>
              </div>
            </div>
            <div class="sl_thumbs" data-nr="2">
              <div class="thumb">
                <a href="#">
                <span class="th_nr">6</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">7</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">8</span>
                <img alt="" src=""/>
                </a>
              </div>
              <div class="thumb">
                <a href="#">
                <span class="th_nr">9</span>
                <img alt="" src=""/>
                </a>
              </div>
            </div>
          </div>
          <div class="thumbs_nav">
            <div class="tn_left">
            </div>
            <div class="tn_right">
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery-1.7.1.min.js">
    </script>
    <script src="js/jquery.easing-1.3.js">
    </script>
    <script src="js/jquery.elslider-0.8.js">
    </script>
    <script src="js/init.js">
    </script>
  </body>

</html>

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
0.7
(function($) {


  var es = function() {
      es.init;
      };

  $.extend(es, {
    version: "0.7",

    defaults: {
      visibleitems: 1,
      vertical: false,
      continuous: false,
      numbers: true,
      thumbs: true,
      fade: false,
      autoplay: false,
      autoplaySpeed: 4000,
      animationSpeed: 300,
      fadingSpeed: 200,
      customEasing: "easeInOutExpo",
      originalwidth: 590,
      originalheight: 290,
      onSlideCallback: false,
      stopOnHoverElement: false,
      startOnMouseOut: false,

      $item: $(".sl_item", es),
      $moving: $(".sl_movingcontainer", es),
      $visible: $(".sl_visible", es),
      $a_left: $(".sl_leftarrow", es),
      $a_right: $(".sl_rightarrow", es),
      $numbers: $(".numbers", es),
      $thumbs: $(".hiddenthumbs", es),
      $number: $(".numbers a", this.numbers),
      $thumb: $(".thumb a", this.thumbs),
      $navbar: $(".nav", es),
      $img: $(".sl_item", es).find("img"),
      $text: $(".sl_text_output", es),

      arguments: {},
      cont_dir: "",
      aniarg_right: {},
      aniarg_left: {},

      lastitem: false,
      firstitem: false,
      currentpos: 0
    },



    // INIT
    init: function(slider, opts) {

      es.opts = $.extend(true, {}, es.defaults, opts);
      es.getAttributes(es.opts);

      if (!es.opts.continuous) {
        es.opts.$a_left.addClass("ishidden");
      }
      $(window).resize(function() {
        es.setSizes(es.opts, slider);
      });
      es.setSizes(es.opts, slider);

      if (es.opts.autoplay) {
        es.autoplay(es.opts, 1);
        var interval = setInterval(es.autoplay, es.opts.autoplaySpeed);
      }


      es.opts.$a_right.on({
        click: function() {
          if (slider.find(".sl_movingcontainer" + ':animated').length) {
            return false;
          }
          es.stopInterval();
          es.animationHandler(es.opts, "right", 1);
          es.thumbsAnimation(es.opts, "right");
          return false;
        }
      });

      es.opts.$a_left.on({
        click: function() {
          if (slider.find(".sl_movingcontainer" + ':animated').length) {
            return false;
          }
          es.stopInterval();
          es.animationHandler(es.opts, "left", 1);
          es.thumbsAnimation(es.opts, "left");
          return false;
        }
      });

    },



    // GET ATTRIBUTES
    getAttributes: function(d) {
      d.itemnr = d.$moving.children().length, d.itemwidth = d.$item.width(), d.itemheight = d.$item.height(), d.visiblewidth = d.visibleitems * d.$item.width();
      d.negativewidth = "-" + d.$item.width() + "px", d.negativeheight = "-" + d.$item.height() + "px"
    },

    // SET SIZES
    setSizes: function(d, slider) {

      var newwidth = d.$visible.width(),
          ratio = d.originalwidth / d.originalheight,
          newheight = newwidth / ratio,
          newmovingwidth = newwidth * d.itemnr,
          newposfromleft = (newwidth * d.currentpos) * -1;

      d.itemwidth = newwidth;
      d.itemheight = newheight;
      d.negativewidth = "-" + newwidth;
      d.negativeheight = "-" + newheight;

      d.$item.width(newwidth).height(newheight);
      d.$img.attr("width", newwidth).attr("height", newheight);
      d.$moving.css("left", newposfromleft);
      d.$moving.width(newmovingwidth);
      slider.height(newheight /* + thumbsheight*/ );

      es.defineArguments(d);

/*

            Thumbnails

            var thumbsheight = $(es.objects.thumbs).height()+10+20;
            var tn_left_width = $(".tn_left",es).width();
            var tn_right_width = $(".tn_right",es).width();
            $(".sl_thumbs",es).width(newwidth - tn_left_width);
            $(".sl_thumbs",es).css("margin-left",tn_left_width);

            for (t = 0; t < es.variables.itemnr; t++) {
                var currentthumb = $(".thumb:eq(" + t + ")");
                if (t == es.variables.currentpos) {
                    var currentcont = parseInt(currentthumb.parent().attr("data-nr"));
                    currentcont--;
                    break;
                }
            }

            var ts_leftpos = (currentcont * newwidth) * -1;
            $(".thumbslider", es).css("left",ts_leftpos);

            $(es.objects.item).width(newwidth).height(newheight);
                        console.log(this);

                        text


            $(es.objects.text).css("top",newheight);
            var newtextheight = $(es.objects.text).height();
            $(es.objects.navbar).css("top",newheight + newtextheight);*/
    },



    appendFirstItem: function(d) {
      d.lastitem = true;
      d.$item.eq(0).clone().appendTo(d.$moving);
    },


    prependLastItem: function(d) {
      d.firstitem = true;
      d.$item.eq(d.itemnr - 1).clone().prependTo(d.$moving);
      d.$moving.css("left", d.negativewidth + "px");
    },

    animationHandler: function(d, direction, times) {

      var currentbefore = d.currentpos;

      if (d.continuous) {

        //continuous true
        switch (direction) {

        case "right":
          d.currentpos = (d.currentpos - 1) + (1 * times);
          if ((d.currentpos + 1) == d.itemnr) {
            es.appendFirstItem(d);
          }
          d.currentpos++;
          if (d.currentpos == d.itemnr) {
            d.currentpos = 0;
          }
          break;

        case "left":
          d.currentpos = (d.currentpos + 1) - (1 * times);
          if ((d.currentpos) == 0) {
            es.prependLastItem(d);
          }
          d.currentpos--;
          if (d.currentpos <= -1) {
            d.currentpos = (d.itemnr - 1);
          }
          break;
        }

      } else {

        // continuous false;
        switch (direction) {

        case "right":
          d.$a_left.removeClass("ishidden");
          d.currentpos = d.currentpos + (1 * times);
          if (d.currentpos == (d.itemnr - d.visibleitems)) {
            d.$a_right.addClass("ishidden");
          }
          break;

        case "left":
          d.$a_right.removeClass("ishidden");
          d.currentpos = d.currentpos - (1 * times);
          if (d.currentpos == 0) {
            d.$a_left.addClass("ishidden");
          }
          break;
        }

      }

      if (d.fade) {
        es.fade(d, direction, times, currentbefore);
      } else {
        es.slide(d, direction, times);
      }

      if (d.thumbs) {
        d.$thumb.removeClass("current");
        d.$thumb.eq(d.currentpos).addClass("current");
      }

      if (d.numbers) {
        d.$number.removeClass("current");
        d.$number.eq(d.currentpos).addClass("current");
      }

      // SLIDE CALLBACK
      if (d.onSlideCallback !== false) {
        d.onSlideCallback(d);
      }

      //return false;
    },


    // SLIDE
    slide: function(d, direction, times) {

      es.defineArguments(d, times);

      if (direction == "right") {
        d.arguments = d.aniarg_right;
      } else {
        d.arguments = d.aniarg_left;
      }

      if (d.firstitem == true) {
        if (d.vertical == false) {
          d.$moving.css("left", d.negativewidth);
        } else {
          d.$moving.css("top", d.negativeheight);
        }
      }

      if (d.fade) {
        d.animationSpeed = 0;
      }

      d.$moving.stop(false, false).animate(
      d.arguments, d.animationSpeed, d.customEasing, function() {

        if (d.lastitem || d.firstitem) {

          if (direction == "right") {
            if (!d.vertical) {
              d.$moving.css("left", "0px");
            } else {
              d.$moving.css("top", 0);
            }
            $(".sl_item:last", es).remove();
            d.lastitem = false;
          } else {
            if (!d.vertical) {
              var fromleft = (d.itemwidth * (d.itemnr - 1)) * -1;
              d.$moving.css("left", fromleft + "px");
              //d.$item.eq(0).remove();
              $(".sl_item:eq(0)", es).remove();
              console.log(fromleft);
            } else {
              var fromtop = (d.itemheight * (d.itemnr - 1)) * -1;
              d.$moving.css("top", fromtop + "px");
            }
            d.firstitem = false;
          }
        }
      });

    },

    // FADE ANIMATION
    fade: function(d, direction, times, startingpos) {

      if (direction == "right") {
        $(".sl_item:eq(" + startingpos + ")").clone().appendTo(d.$visible).fadeOut(d.fadingSpeed, function() {
          //d.$item.eq(startingpos).clone().appendTo(d.$visible).fadeOut(d.fadingSpeed, function() {
          $(this).remove();
        });
        es.slide(d, "right", times);
      } else {
        if (startingpos == 0) {
          startingpos = 1;
        }
        $(".sl_item:eq(" + startingpos + ")").clone().appendTo(d.$visible).fadeOut(d.fadingSpeed, function() {
          jQuery(this).remove();
        });
        es.slide(d, "left", times);
      }
    },

    // AUTOPLAY
    autoplay: function(d, times) {
      es.animationHandler(d, "right", times);
    },

    // STOP INTERVAL
    stopInterval: function() {
/*if ( interval ) {
                                interval = clearInterval(interval);
                        }*/
    },



    // THUMBS ANIMATION
    thumbsAnimation: function(direction) {

    },

    // ARGUMENTS
    defineArguments: function(d, times) {

      if (!times) {
        times = 1;
      }

      if (d.vertical) {
        d.$item.css({
          "float": "none"
        });
        d.$visible.css({
          "height": d.itemheight * d.visibleitems
        });
        d.aniarg_right["top"] = "-=" + sl_itemheight * times;
        d.aniarg_right["queue"] = false;
        d.aniarg_left["top"] = "+=" + sl_itemheight * times;
        d.aniarg_left["queue"] = false;
        d.cont_dir = "top";
      } else {
        d.aniarg_right["left"] = "-=" + d.itemwidth * times;
        d.aniarg_right["queue"] = false;
        d.aniarg_left["left"] = "+=" + d.itemwidth * times;
        d.aniarg_left["queue"] = false;
        d.cont_dir = "left";
      }
    }

  });

  $.fn.elslider = function(options) {
    var $this = $(this);
    options = options || {};
    es.init($this, options);
    return this;
  };

})(jQuery);
ready

Revisions

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