title: Broken jQuery slider
body: <p>I have a problem with a jQuery javascript slider.</p>
  
  <p>Basically I have a problem with a slider on this site <a href="http://crearewebsites.co.uk/victoria/pb-metal-dev/" rel="nofollow">http://crearewebsites.co.uk/victoria/pb-metal-dev/</a> </p>
  
  <p>It's called orbit slider available from <a href="http://www.zurb.com/playground/orbit-jquery-image-slider" rel="nofollow">http://www.zurb.com/playground/orbit-jquery-image-slider</a>, I've tried searching their documentation etc but no help there.</p>
  
  <p>The problem is that when the page is first loaded all of the slides flash through really quickly then it gets stuck on the first slide for 2 cycles before working properly.</p>
  
  <p>Also is there a way to force it behind the image container as the rounded corners should cover the slides when it animates.</p>
  
  <p>Any help even the slightest would be much appreciated, cheers!</p>
  
  <p>Here is the code im using to call the slider:</p>
  
  <pre><code>&lt;script src="js/jquery.orbit-1.2.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   $(window).load(function() {
     $('#slider').orbit({
    'timer': true,
    'advanceSpeed': 6000,     
    'bullets' : false,        
    'bulletThumbs': false,
   });
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>  &lt;div id="slider-container"&gt;
       &lt;div id="slider" class="png-fix"&gt;
          &lt;img src="Images/energy-efficient-powder-coating-equipment.png" class="png-fix slide-img" alt="PB Metal Finishing Spray Save System" /&gt; 
          &lt;img src="Images/experts-in-powder-coating-equipment.png" class="png-fix slide-img" alt="Experts in Powder Coating Equipment" /&gt;
          &lt;img src="Images/complete-turnkey-modular-powder-coating-plant-solutions.png" class="png-fix slide-img" alt="Complete modular, turnkey powder coating plant solutions." /&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Think it might be something in the JavaScript code:</p>
  
  <hr>
  
  <pre><code>(function(e) {
          e.fn.orbit = function(a) {
                  a = e.extend({
                      animation: "horizontal-push",
                      animationSpeed: 600,
                      timer: true,
                      advanceSpeed: 4E3,
                      pauseOnHover: false,
                      startClockOnMouseOut: false,
                      startClockOnMouseOutAfter: 1E3,
                      directionalNav: true,
                      captions: true,
                      captionAnimation: "fade",
                      captionAnimationSpeed: 600,
                      bullets: false,
                      bulletThumbs: false,
                      bulletThumbLocation: "",
                      afterSlideChange: function() {}
                  }, a);
                  return this.each(function() {
                              function t() {
                                  if (!a.timer || a.timer == "false") return false;
                                  else if (u.is(":hidden")) v = setInterval(function() {
                                      o("next")
                                  }, a.advanceSpeed);
                                  else {
                                      r = true;
                                      A.removeClass("active");
                                      v = setInterval(function() {
                                          var d = "rotate(" + p + "deg)";
                                          p += 2;
                                          w.css({
                                              "-webkit-transform": d,
                                              "-moz-transform": d,
                                              "-o-transform": d
                                          });
                                          if (p &gt; 180) {
                                              w.addClass("move");
                                              B.addClass("move")
                                          }
                                          if (p &gt; 360) {
                                              w.removeClass("move");
                                              B.removeClass("move");
                                              p = 0;
                                              o("next")
                                          }
                                      }, a.advanceSpeed / 180)
                                  }
                              }
  
                              function q() {
                                  if (!a.timer || a.timer == "false") return false;
                                  else {
                                      r = false;
                                      clearInterval(v);
                                      A.addClass("active")
                                  }
                              }
  
                              function C() {
                                  if (!a.captions || a.captions == "false") return false;
                                  else {
                                      var d = c.eq(b).data("caption");
                                      if (_captionHTML = e(d).html()) {
                                          l.attr("id", d).html(_captionHTML);
                                          a.captionAnimation == "none" &amp;&amp; l.show();
                                          a.captionAnimation == "fade" &amp;&amp; l.fadeIn(a.captionAnimationSpeed);
                                          a.captionAnimation == "slideOpen" &amp;&amp; l.slideDown(a.captionAnimationSpeed)
                                      } else {
                                          a.captionAnimation == "none" &amp;&amp; l.hide();
                                          a.captionAnimation == "fade" &amp;&amp; l.fadeOut(a.captionAnimationSpeed);
                                          a.captionAnimation == "slideOpen" &amp;&amp; l.slideUp(a.captionAnimationSpeed)
                                      }
                                  }
                              }
  
                              function D() {
                                  if (a.bullets) F.children("li").removeClass("active").eq(b).addClass("active");
                                  else return false
                              }
  
                              function o(d) {
                                  function g() {
                                      c.eq(m).css({
                                          "z-index": 1
                                      });
                                      x = false;
                                      a.afterSlideChange.call(this)
                                  }
                                  var m = b,
                                      h = d;
                                  if (m == h) return false;
                                  if (c.length == "1") return false;
                                  if (!x) {
                                      x = true;
                                      if (d == "next") {
                                          b++;
                                          if (b == s) b = 0
                                      } else if (d == "prev") {
                                          b--;
                                          if (b &lt; 0) b = s - 1
                                      } else {
                                          b = d;
                                          if (mb) h = "prev"
                                      }
                                      D();
                                      c.eq(m).css({
                                          "z-index": 2
                                      });
                                      a.animation == "fade" &amp;&amp; c.eq(b).css({
                                          opacity: 0,
                                          "z-index": 3
                                      }).animate({
                                          opacity: 1
                                      }, a.animationSpeed, g);
                                      if (a.animation == "horizontal-slide") {
                                          h == "next" &amp;&amp; c.eq(b).css({
                                              left: k,
                                              "z-index": 3
                                          }).animate({
                                              left: 0
                                          }, a.animationSpeed, g);
                                          h == "prev" &amp;&amp; c.eq(b).css({
                                              left: -k,
                                              "z-index": 3
                                          }).animate({
                                              left: 0
                                          }, a.animationSpeed, g)
                                      }
                                      if (a.animation == "vertical-slide") {
                                          h == "prev" &amp;&amp; c.eq(b).css({
                                              top: y,
                                              "z-index": 3
                                          }).animate({
                                              top: 0
                                          }, a.animationSpeed, g);
                                          h == "next" &amp;&amp; c.eq(b).css({
                                              top: -y,
                                              "z-index": 3
                                          }).animate({
                                              top: 0
                                          }, a.animationSpeed, g)
                                      }
                                      if (a.animation == "horizontal-push") {
                                          if (h == "next") {
                                              c.eq(b).css({
                                                  left: k,
                                                  "z-index": 3
                                              }).animate({
                                                  left: 0
                                              }, a.animationSpeed, g);
                                              c.eq(m).animate({
                                                  left: -k
                                              }, a.animationSpeed)
                                          }
                                          if (h == "prev") {
                                              c.eq(b).css({
                                                  left: -k,
                                                  "z-index": 3
                                              }).animate({
                                                  left: 0
                                              }, a.animationSpeed, g);
                                              c.eq(m).animate({
                                                  left: k
                                              }, a.animationSpeed)
                                          }
                                      }
                                      C()
                                  }
                              }
                              var b = 0,
                                  s = 0,
                                  k, y, x, j = e(this).addClass("orbit"),
                                  f = j.wrap('').parent();
                              j.add(k).width("1px").height("1px");
                              var c = j.children("img, a img, div");
                              c.each(function() {
                                  var d = e(this),
                                      g = d.width();
                                  d = d.height();
                                  if (g &gt; j.width()) {
                                      j.add(f).width(g);
                                      k = j.width()
                                  }
                                  if (d &gt; j.height()) {
                                      j.add(f).height(d);
                                      y = j.height()
                                  }
                                  s++
                              });
                              if (c.length == 1) {
                                  a.directionalNav = false;
                                  a.timer = false;
                                  a.bullets = false
                              }
                              c.eq(b).css({
                                  "z-index": 3
                              }).fadeIn(function() {
                                  c.css({
                                      display: "block"
                                  })
                              });
                              if (a.timer) {
                                  f.append('');
                                  var u = e("div.timer"),
                                      r;
                                  if (u.length != 0) {
                                      var w = e("div.timer span.rotator"),
                                          B = e("div.timer span.mask"),
                                          A = e("div.timer span.pause"),
                                          p = 0,
                                          v;
                                      t();
                                      u.click(function() {
                                          r ? q() : t()
                                      });
                                      if (a.startClockOnMouseOut) {
                                          var E;
                                          f.mouseleave(function() {
                                              E = setTimeout(function() {
                                                  r || t()
                                              }, a.startClockOnMouseOutAfter)
                                          });
                                          f.mouseenter(function() {
                                              clearTimeout(E)
                                          })
                                      }
                                  }
                              }
                              a.pauseOnHover &amp;&amp; f.mouseenter(function() {
                                  q()
                              });
                              if (a.captions) {
                                  f.append('');
                                  var l = f.children(".orbit-caption");
                                  C()
                              }
                              if (a.directionalNav) {
                                  if (a.directionalNav == "false") return false;
                                  f.append('RightLeft');
                                  var n = f.children("div.slider-nav").children("span.left"),
                                      z = f.children("div.slider-nav").children("span.right");
                                  n.click(function() {
                                      q();
                                      o("prev")
                                  });
                                  z.click(function() {
                                      q();
                                      o("next")
                                  })
                              }
                              if (a.bullets) {
                                  f.append('');
                                  var F = e("ul.orbit-bullets");
                                  for (i = 0; i "+(i+1)+"
                                      ");if(a.bulletThumbs)if(z=c.eq(i).data("
                                      thumb ")){n=e(''+i+"
                                      ");n.css({background:"
                                      url("+a.bulletThumbLocation+z+") no - repeat "})}e("
                                      ul.orbit - bullets ").append(n);n.data("
                                      index ",i);n.click(function(){q();o(e(this).data("
                                      index "))})}D()}})}})(jQuery);
  </code></pre>