title: Hero Carousel Problems
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>I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS &amp; Javascript. The HTML is what I THINK it should look like, which is obviously wrong.</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: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
  }
  
  .hero-carousel article {
      width: 980px;
      margin: 0 auto;
      height: 480px;
      display: block;
      float: left;
      position: relative;
      }
  
  .hero-carousel-container article {
      float: left;
      }
  
      .hero-carousel article img{
          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;
              }
  
          .hero-carousel-nav li.prev {
              left: 48px;
              right: auto;
              }
  
          .hero-carousel-nav li a {
              background: #D21034;
              color: #fff;
              border: none;
              outline: none;
              display: block;
              float: left;
              padding: 5px 20px;
  
              -moz-border-radius: 20px;
              -webkit-border-radius: 20px;
              border-radius: 20px;
              behavior: url(/assets/PIE.htc);
              }
  
          .hero-carousel-nav li a:hover { 
              background: #89051C;
              }
  
          .hero-carousel-nav li a:active,
          .hero-carousel-nav li a:focus { 
              border: none;
              outline: none;
              }
  </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>