title: Slider not "sliding" & prev/next buttons issue
body: <p>The slider/carousel I'm trying to implent is this: <a href="http://www.paulwelsh.info/jquery-plugins/hero-carousel/" rel="nofollow">http://www.paulwelsh.info/jquery-plugins/hero-carousel/</a> </p>
  
  <p>This is my HTML, CSS &amp; Javascript.</p>
  
  <p>Problems:</p>
  
  <ol>
  <li><p>Images do not scroll by themselves (the button's that exist don't work either, justa   link that says "prev &amp; "next", that I don't even want there. <code>I want custom .png's that should be clickable..</code> </p></li>
  <li><p>The images aren't "sliding". </p></li>
  <li><p>If you look in the .css file, you'll
  see <code>I tried to add buttons for next &amp; prev, which failed.</code> Not sure what to put as <code>.hero-something-next thingy,</code> I saw a piece of code that I could implent by myself, but it says .slideshow-next in that one, and I know I have to have something different (name-wise), I just don't know what it should say instead.</p></li>
  <li><p>There's also a line in the beginning of the .js file that keeps putting
  "Prev" &amp; "Next" links in the slide, which I don't want. I just want
  the arrows to be the ones switching images.</p></li>
  <li><p>I'm not sure what that "easing" part is, nor the "pie" thingy, and why I have it in my css, if it's even
  necessary.. (Had webdesign class for like a month, don't have that much experience, keep it simple!)</p></li>
  </ol>
  
  <p>Link of what it currently looks like: imgur.com/e0lh9</p>
  
  <p><strong>Fiddle</strong> jsfiddle.net/P2YqR/2</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div class="hero"&gt;
  &lt;div class="hero-carousel"&gt;
  
  
  &lt;article&gt;
    &lt;img src="images/deadmau5/slide1.jpg" /&gt;
  
  &lt;/article&gt;
  
  &lt;article&gt;
    &lt;img src="images/deadmau5/slide2.jpg" /&gt;
  
  &lt;/article&gt;
  
  &lt;article&gt;
    &lt;img src="images/deadmau5/slide3.jpg" /&gt;
  
  &lt;/article&gt;
  &lt;article&gt;
  
    &lt;img src="images/deadmau5/slide4.jpg" /&gt;
  
  &lt;/article&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $('.hero-carousel').heroCarousel({
              easing: 'easeOutExpo',
              css3pieFix: true
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hero {
  width: 1366px;
   height: 340px; position:absolute;top:270px;
  overflow: hidden;
  margin-bottom: 48px;margin: 0 auto; border-top:9px solid rgba(51, 51, 51, .30);border-bottom: 9px solid rgba(51, 51, 51, .30); padding: 0 0 12px 0; }
  
  .hero-carousel article {
      width: 960px;
      margin: 0 auto;
      height: 470px;
      display: block;
      float: left;
      position: relative;
      }
  
  .hero-carousel-container article {
      float: left;
      }
  
      .hero-carousel article img{
      border-style:solid;border-width:6px;color:#000; position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          }
  
      .hero-carousel article .contents {
          position: relative;
          z-index: 2;
          top: 72px;
          left: 48px;
          list-style: none;
          color: #000;
          width: 556px;
          padding: 20px;
  
          background: rgba(255,255,255,0.8);
          -pie-background: rgba(255,255,255,0.8);
  
          -moz-border-radius: 20px;
          -webkit-border-radius: 20px;
          border-radius: 20px;
  
          behavior: url(/assets/PIE.htc);
          }
  
      .hero-carousel-nav {
          width: 980px;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -490px;
          z-index: 2;
          }
  
  
  
          .hero-carousel-nav li {
              position: absolute;
              bottom: 48px;
              right: 48px;
              list-style: none;
  }
  
  
  a.hero-carousel_next{ WHAT HERE? &lt;----
  background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
  display: inline-block;
  width: 59px;        /*width of your img*/
  height: 59px;      /*height of your img*/
  font-size: 0px;    /*this is better than 1px*/
  }
  
  
  .hero-carousel-nav_prev{ SAME HERE &lt;---?
   background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
  display: inline-block;
  width: 59px;        /*width of your img*/
  height: 59px;      /*height of your img*/
  font-size: 0px;    /*this is better than 1px*/
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>jQuery.fn.heroCarousel = function (a) {
      a = jQuery.extend({
          animationSpeed: 1000,
          navigation: true,
          easing: "",
          timeout: 5000,
          pause: true,
          pauseOnNavHover: true,
          prevText: "Previous",
          nextText: "Next",
          css3pieFix: false,
          currentClass: "current",
          onLoad: function () {},
          onStart: function () {},
          onComplete: function () {}
      }, a);
      if (jQuery.browser.msie &amp;&amp; parseFloat(jQuery.browser.version) &lt; 7) {
          a.animationSpeed = 0
      }
      return this.each(function () {
          var k = jQuery(this),
              b = k.children();
          currentItem = 1;
          childWidth = b.width();
          childHeight = b.height();
          if (b.length &gt; 2) {
              b.each(function (m) {
                  if (a.itemClass) {
                      jQuery(this).addClass(a.itemClass)
                  }
              });
              b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));
              var d = Math.round(childWidth * k.children().length),
                  l = "-" + Math.round(childWidth + Math.round(childWidth / 2)) + "px";
              k.addClass("hero-carousel-container").css({
                  position: "relative",
                  overflow: "hidden",
                  left: "50%",
                  top: 0,
                  "margin-left": l,
                  height: childHeight,
                  width: d
              });
              k.before('&lt;ul class="hero-carousel-nav"&gt;&lt;li class="prev"&gt;&lt;a href="#"&gt;' + a.prevText + '&lt;/a&gt;&lt;/li&gt;&lt;li class="next"&gt;&lt;a href="#"&gt;' + a.nextText + "&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;");
              var e = k.prev(".hero-carousel-nav"),
                  h;
              if (a.timeout &gt; 0) {
                  var j = false;
                  if (a.pause) {
                      k.hover(function () {
                          j = true
                      }, function () {
                          j = false
                      })
                  }
                  if (a.pauseOnNavHover) {
                      e.hover(function () {
                          j = true
                      }, function () {
                          j = false
                      })
                  }
                  function c() {
                      if (!j) {
                          e.find(".next a").trigger("click")
                      }
                  }
                  h = window.setInterval(c, a.timeout)
              }
              e.find("a").data("disabled", false).click(function (p) {
                  p.preventDefault();
                  var m = jQuery(this),
                      n = m.parent().hasClass("prev"),
                      o = k.children();
                  if (m.data("disabled") === false) {
                      a.onStart(k, e, o.eq(currentItem), a);
                      if (n) {
                          f(o.filter(":last"), "previous")
                      } else {
                          f(o.filter(":first"), "next")
                      }
                      m.data("disabled", true);
                      setTimeout(function () {
                          m.data("disabled", false)
                      }, a.animationSpeed + 200);
                      if (a.timeout &gt; 0) {
                          window.clearInterval(h);
                          h = window.setInterval(c, a.timeout)
                      }
                  }
              });
  
              function f(m, q) {
                  var o = parseFloat(k.position().left),
                      n = parseFloat(k.css("margin-left"));
                  if (q === "previous") {
                      m.before(m.clone().addClass("carousel-clone"));
                      k.prepend(m);
                      var p = Math.round(n - childWidth);
                      var r = "+="
                  } else {
                      m.after(m.clone().addClass("carousel-clone"));
                      k.append(m);
                      var p = l;
                      var r = "-="
                  }
                  if (a.css3pieFix) {
                      g(jQuery(".carousel-clone"))
                  }
                  k.css({
                      left: o,
                      width: Math.round(d + childWidth),
                      "margin-left": p
                  }).animate({
                      left: r + childWidth
                  }, a.animationSpeed, a.easing, function () {
                      k.css({
                          left: "50%",
                          width: d,
                          "margin-left": n
                      });
                      jQuery(".carousel-clone").remove();
                      i()
                  })
              }
              function g(n) {
                  var m = n.attr("_pieId");
                  if (m) {
                      n.attr("_pieId", m + "_cloned")
                  }
                  n.find("*[_pieId]").each(function (o, p) {
                      var q = $(p).attr("_pieId");
                      $(p).attr("_pieId", q + "_cloned")
                  })
              }
              function i() {
                  var m = k.children();
                  m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);
                  a.onComplete(k, k.prev(".hero-carousel-nav"), m.eq(currentItem), a)
              }
              if (jQuery.browser.msie) {
                  e.find("a").attr("hideFocus", "true")
              }
              a.onLoad(k, e, k.children().eq(currentItem), a)
          }
      })
  };
  </code></pre>
  
  <p>And please, when providing answers, hold like a few minutes 'til I respond with confirmation that it works!</p>
  
  <p>Result should be similar to that of: <a href="http://www.deadmau5.com" rel="nofollow">http://www.deadmau5.com</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>.hero-carousel-nav li.next a { 
  background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
  display: inline-block;
  width: 100px;        /*width of your img*/
  height: 120px;      /*height of your img*/
  font-size: 0px; 
  right: -15px;  /*this is better than 1px*/
  bottom: 90px;
  }
  
  
  .hero-carousel-nav li.prev a { 
   background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
  display: inline-block;
  width: 100px;        /*width of your img*/
  height: 120px;      /*height of your img*/
  font-size: 0px;    /*this is better than 1px*/
  left: -50px;
  bottom: 90px;               
  }
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <pre><code>   .hero-carousel-nav {
      width: 980px;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -490px;
      z-index: 2;
      }
  
  
  
      .hero-carousel-nav li {
          position: absolute;
          bottom: 48px;
          right: 48px;
          list-style: none;
  }
  .hero-carousel-nav li.prev {
  left: -50px;
  right: auto;
  bottom: 100px;
  }
  .hero-carousel-nav li.next {
  right: -30px;
  left: auto;
  bottom: 100px;
  }
  .hero-carousel-nav li a {
   background: none repeat scroll 0 0 #D21034;
  
   color: #FFFFFF;
   display: block;
   float: left;
  
  
  }
  
  .hero-carousel-nav li.next a { 
  background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
  display: inline-block;
  width: 115px;        /*width of your img*/
  height: 100px;      /*height of your img*/
  font-size: 0px; 
  right: -15px;  /*this is better than 1px*/
  bottom: 100px;
  overflow:hidden;
  
  }
  
  
  .hero-carousel-nav li.prev a { 
  background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
  display: inline-block;
  width: 115px;        /*width of your img*/
  height: 100px;      /*height of your img*/
  font-size: 0px;    /*this is better than 1px*/
  left: -50px;
  bottom: 100px;
  overflow:hidden;
  
  }
  </code></pre>