title: Placing jquery navigation buttons over slider
body: <p>Thanks man, </p>
  
  <p>It took me a while but here's the code. I hope this works. I've never used this forum before. </p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;html&gt;
        &lt;div class="container"&gt;
  &lt;div id="slides"&gt;
                &lt;img src="_images/aqw.png" data-title="ALLIANCE QUARTETT WIEN: "&gt;
                &lt;img src="_images/aqw2.jpg"&gt;
                &lt;img src="_images/eme.png"&gt;
                &lt;img src="_images/eme2.jpg"&gt;
                &lt;img src="_images/zen.png"&gt;
                &lt;img src="_images/zen2.png"&gt;
                &lt;img src="_images/cts.png"&gt;
                &lt;img src="_images/cts2.jpg"&gt;
                &lt;img src="_images/ag2.png"&gt;
                &lt;img src="_images/ag.jpg"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End SlidesJS Required: Start Slides --&gt;
  
  &lt;!-- SlidesJS Required: Link to jQuery --&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;!-- End SlidesJS Required --&gt;
  
  &lt;!-- SlidesJS Required: Link to jquery.slides.js --&gt;
  &lt;script src="js/jquery.slides.min.js"&gt;&lt;/script&gt;
  &lt;!-- End SlidesJS Required --&gt;
  
  &lt;!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready --&gt;
  &lt;script&gt;
  $(function() {
    $('#slides').slidesjs({
      width: 1000,
      height: 650,
      play: {
        active: true,
        auto: true,
        interval: 5000,
        swap: true
      }
    });
  });
  &lt;/script&gt;
  &lt;!-- End SlidesJS Required --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#slides {
    display: none
  }
  
  #slides .slidesjs-navigation {
    margin:10px 0 0 10px;
  }
  
  a.slidesjs-next,
  a.slidesjs-previous,
  a.slidesjs-play,
  a.slidesjs-stop {
    background-image:url(_images/btns-next-prev.png);
    background-repeat: no-repeat;
    display:block;
    width:12px;
    height:18px;
    overflow: hidden;
    text-indent: -9999px;
    float: left;
    margin-right:5px;
  }
  
  a.slidesjs-next {
    margin-right:10px;
    background-position: -12px 0;
  }
  
  a:hover.slidesjs-next {
    background-position: -12px -18px;
  }
  
  a.slidesjs-previous {
    background-position: 0 0;
  }
  
  a:hover.slidesjs-previous {
    background-position: 0 -18px;
  }
  
  a.slidesjs-play {
    width:15px;
    background-position: -25px 0;
  }
  
  a:hover.slidesjs-play {
    background-position: -25px -18px;
  }
  
  a.slidesjs-stop {
    width:18px;
    background-position: -41px 0;
  }
  
  a:hover.slidesjs-stop {
    background-position: -41px -18px;
  }
  
  .slidesjs-pagination {
    margin: 7px 0 0;
    float: right;
    list-style: none;
  }
  
  .slidesjs-pagination li {
    float: left;
    margin: 0 1px;
  }
  
  .slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(img/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
  }
  
  .slidesjs-pagination li a.active,
  .slidesjs-pagination li a:hover.active {
    background-position: 0 -13px
  }
  
  .slidesjs-pagination li a:hover {
    background-position: 0 -26px
  }
  
  #slides a:link,
  #slides a:visited {
    color: #333
  }
  
  #slides a:hover,
  #slides a:active {
    color: #9e2020
  }
  
  .navbar {
    overflow: hidden
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>(function () {
  (function (a, b, c) {
      var d, e, f;
      return f = "slidesjs", e = {
          width: 940,
          height: 528,
          start: 1,
          navigation: {
              active: !0,
              effect: "slide"
          },
          pagination: {
              active: !0,
              effect: "slide"
          },
          play: {
              active: !1,
              effect: "slide",
              interval: 5e3,
              auto: !1,
              swap: !0,
              pauseOnHover: !1,
              restartDelay: 2500
          },
          effect: {
              slide: {
                  speed: 500
              },
              fade: {
                  speed: 300,
                  crossfade: !0
              }
          },
          callback: {
              loaded: function () {},
              start: function () {},
              complete: function () {}
          }
      }, d = function () {
          function b(b, c) {
              this.element = b, this.options = a.extend(!0, {}, e, c), this._defaults = e, this._name = f, this.init()
          }
          return b
      }(), d.prototype.init = function () {
          var c, d, e, f, g, h, i = this;
          return c = a(this.element), this.data = a.data(this), a.data(this, "animating", !1), a.data(this, "total", c.children().not(".slidesjs-navigation", c).length), a.data(this, "current", this.options.start - 1), a.data(this, "vendorPrefix", this._getVendorPrefix()), "undefined" != typeof TouchEvent &amp;&amp; (a.data(this, "touch", !0), this.options.effect.slide.speed = this.options.effect.slide.speed / 2), c.css({
              overflow: "hidden"
          }), c.slidesContainer = c.children().not(".slidesjs-navigation", c).wrapAll("&lt;div class='slidesjs-container'&gt;", c).parent().css({
              overflow: "hidden",
              position: "relative"
          }), a(".slidesjs-container", c).wrapInner("&lt;div class='slidesjs-control'&gt;", c).children(), a(".slidesjs-control", c).css({
              position: "relative",
              left: 0
          }), a(".slidesjs-control", c).children().addClass("slidesjs-slide").css({
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              zIndex: 0,
              display: "none",
              webkitBackfaceVisibility: "hidden"
          }), a.each(a(".slidesjs-control", c).children(), function (b) {
              var c;
              return c = a(this), c.attr("slidesjs-index", b)
          }), this.data.touch &amp;&amp; (a(".slidesjs-control", c).on("touchstart", function (a) {
              return i._touchstart(a)
          }), a(".slidesjs-control", c).on("touchmove", function (a) {
              return i._touchmove(a)
          }), a(".slidesjs-control", c).on("touchend", function (a) {
              return i._touchend(a)
          })), c.fadeIn(0), this.update(), this.data.touch &amp;&amp; this._setuptouch(), a(".slidesjs-control", c).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function () {
              return a(this).css({
                  zIndex: 10
              })
          }), this.options.navigation.active &amp;&amp; (g = a("&lt;a&gt;", {
              "class": "slidesjs-previous slidesjs-navigation",
              href: "#",
              title: "Previous",
              text: "Previous"
          }).appendTo(c), d = a("&lt;a&gt;", {
              "class": "slidesjs-next slidesjs-navigation",
              href: "#",
              title: "Next",
              text: "Next"
          }).appendTo(c)), a(".slidesjs-next", c).click(function (a) {
              return a.preventDefault(), i.stop(!0), i.next(i.options.navigation.effect)
          }), a(".slidesjs-previous", c).click(function (a) {
              return a.preventDefault(), i.stop(!0), i.previous(i.options.navigation.effect)
          }), this.options.play.active &amp;&amp; (f = a("&lt;a&gt;", {
              "class": "slidesjs-play slidesjs-navigation",
              href: "#",
              title: "Play",
              text: "Play"
          }).appendTo(c), h = a("&lt;a&gt;", {
              "class": "slidesjs-stop slidesjs-navigation",
              href: "#",
              title: "Stop",
              text: "Stop"
          }).appendTo(c), f.click(function (a) {
              return a.preventDefault(), i.play(!0)
          }), h.click(function (a) {
              return a.preventDefault(), i.stop(!0)
          }), this.options.play.swap &amp;&amp; h.css({
              display: "none"
          })), this.options.pagination.active &amp;&amp; (e = a("&lt;ul&gt;", {
              "class": "slidesjs-pagination"
          }).appendTo(c), a.each(Array(this.data.total), function (b) {
              var c, d;
              return c = a("&lt;li&gt;", {
                  "class": "slidesjs-pagination-item"
              }).appendTo(e), d = a("&lt;a&gt;", {
                  href: "#",
                  "data-slidesjs-item": b,
                  html: b + 1
              }).appendTo(c), d.click(function (b) {
                  return b.preventDefault(), i.stop(!0), i.goto(1 * a(b.currentTarget).attr("data-slidesjs-item") + 1)
              })
          })), a(b).bind("resize", function () {
              return i.update()
          }), this._setActive(), this.options.play.auto &amp;&amp; this.play(), this.options.callback.loaded(this.options.start)
      }, d.prototype._setActive = function (b) {
          var c, d;
          return c = a(this.element), this.data = a.data(this), d = b &gt; -1 ? b : this.data.current, a(".active", c).removeClass("active"), a("li:eq(" + d + ") a", c).addClass("active")
      }, d.prototype.update = function () {
          var b, c, d;
          return b = a(this.element), this.data = a.data(this), a(".slidesjs-control", b).children(":not(:eq(" + this.data.current + "))").css({
              display: "none",
              left: 0,
              zIndex: 0
          }), d = b.width(), c = this.options.height / this.options.width * d, this.options.width = d, this.options.height = c, a(".slidesjs-control, .slidesjs-container", b).css({
              width: d,
              height: c
          })
      }, d.prototype.next = function (b) {
          var c;
          return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "next"), void 0 === b &amp;&amp; (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
      }, d.prototype.previous = function (b) {
          var c;
          return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "previous"), void 0 === b &amp;&amp; (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
      }, d.prototype.goto = function (b) {
          var c, d;
          if (c = a(this.element), this.data = a.data(this), void 0 === d &amp;&amp; (d = this.options.pagination.effect), b &gt; this.data.total ? b = this.data.total : 1 &gt; b &amp;&amp; (b = 1), "number" == typeof b) return "fade" === d ? this._fade(b) : this._slide(b);
          if ("string" == typeof b) {
              if ("first" === b) return "fade" === d ? this._fade(0) : this._slide(0);
              if ("last" === b) return "fade" === d ? this._fade(this.data.total) : this._slide(this.data.total)
          }
      }, d.prototype._setuptouch = function () {
          var b, c, d, e;
          return b = a(this.element), this.data = a.data(this), e = a(".slidesjs-control", b), c = this.data.current + 1, d = this.data.current - 1, 0 &gt; d &amp;&amp; (d = this.data.total - 1), c &gt; this.data.total - 1 &amp;&amp; (c = 0), e.children(":eq(" + c + ")").css({
              display: "block",
              left: this.options.width
          }), e.children(":eq(" + d + ")").css({
              display: "block",
              left: -this.options.width
          })
      }, d.prototype._touchstart = function (b) {
          var c, d;
          return c = a(this.element), this.data = a.data(this), d = b.originalEvent.touches[0], this._setuptouch(), a.data(this, "touchtimer", Number(new Date)), a.data(this, "touchstartx", d.pageX), a.data(this, "touchstarty", d.pageY), b.stopPropagation()
      }, d.prototype._touchend = function (b) {
          var c, d, e, f, g, h, i, j = this;
          return c = a(this.element), this.data = a.data(this), h = b.originalEvent.touches[0], f = a(".slidesjs-control", c), f.position().left &gt; .5 * this.options.width || f.position().left &gt; .1 * this.options.width &amp;&amp; 250 &gt; Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "previous"), this._slide()) : f.position().left &lt; -(.5 * this.options.width) || f.position().left &lt; -(.1 * this.options.width) &amp;&amp; 250 &gt; Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "next"), this._slide()) : (e = this.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "translateX(0px)", f[0].style[d] = .85 * this.options.effect.slide.speed + "ms"), f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
              return e = j.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "", f[0].style[d] = "", f[0].style[g] = ""
          }), b.stopPropagation()
      }, d.prototype._touchmove = function (b) {
          var c, d, e, f, g;
          return c = a(this.element), this.data = a.data(this), f = b.originalEvent.touches[0], d = this.data.vendorPrefix, e = a(".slidesjs-control", c), g = d + "Transform", a.data(this, "scrolling", Math.abs(f.pageX - this.data.touchstartx) &lt; Math.abs(f.pageY - this.data.touchstarty)), this.data.animating || this.data.scrolling || (b.preventDefault(), this._setuptouch(), e[0].style[g] = "translateX(" + (f.pageX - this.data.touchstartx) + "px)"), b.stopPropagation()
      }, d.prototype.play = function (b) {
          var c, d, e, f = this;
          return c = a(this.element), this.data = a.data(this), !this.data.playInterval &amp;&amp; (b &amp;&amp; (d = this.data.current, this.data.direction = "next", "fade" === this.options.play.effect ? this._fade() : this._slide()), a.data(this, "playInterval", setInterval(function () {
              return d = f.data.current, f.data.direction = "next", "fade" === f.options.play.effect ? f._fade() : f._slide()
          }, this.options.play.interval)), e = a(".slidesjs-container", c), this.options.play.pauseOnHover &amp;&amp; (e.unbind(), e.bind("mouseenter", function () {
              return f.stop()
          }), e.bind("mouseleave", function () {
              return f.options.play.restartDelay ? a.data(f, "restartDelay", setTimeout(function () {
                  return f.play(!0)
              }, f.options.play.restartDelay)) : f.play()
          })), a.data(this, "playing", !0), a(".slidesjs-play", c).addClass("slidesjs-playing"), this.options.play.swap) ? (a(".slidesjs-play", c).hide(), a(".slidesjs-stop", c).show()) : void 0
      }, d.prototype.stop = function (b) {
          var c;
          return c = a(this.element), this.data = a.data(this), clearInterval(this.data.playInterval), this.options.play.pauseOnHover &amp;&amp; b &amp;&amp; a(".slidesjs-container", c).unbind(), a.data(this, "playInterval", null), a.data(this, "playing", !1), a(".slidesjs-play", c).removeClass("slidesjs-playing"), this.options.play.swap ? (a(".slidesjs-stop", c).hide(), a(".slidesjs-play", c).show()) : void 0
      }, d.prototype._slide = function (b) {
          var c, d, e, f, g, h, i, j, k, l, m = this;
          return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b &gt; -1 ? (b -= 1, l = b &gt; d ? 1 : -1, e = b &gt; d ? -this.options.width : this.options.width, g = b) : (l = "next" === this.data.direction ? 1 : -1, e = "next" === this.data.direction ? -this.options.width : this.options.width, g = d + l), -1 === g &amp;&amp; (g = this.data.total - 1), g === this.data.total &amp;&amp; (g = 0), this._setActive(g), i = a(".slidesjs-control", c), b &gt; -1 &amp;&amp; i.children(":not(:eq(" + d + "))").css({
              display: "none",
              left: 0,
              zIndex: 0
          }), i.children(":eq(" + g + ")").css({
              display: "block",
              left: l * this.options.width,
              zIndex: 10
          }), this.options.callback.start(d + 1), this.data.vendorPrefix ? (h = this.data.vendorPrefix, k = h + "Transform", f = h + "TransitionDuration", j = h + "TransitionTimingFunction", i[0].style[k] = "translateX(" + e + "px)", i[0].style[f] = this.options.effect.slide.speed + "ms", i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
              return i[0].style[k] = "", i[0].style[f] = "", i.children(":eq(" + g + ")").css({
                  left: 0
              }), i.children(":eq(" + d + ")").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
              }), a.data(m, "current", g), a.data(m, "animating", !1), i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"), i.children(":not(:eq(" + g + "))").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
              }), m.data.touch &amp;&amp; m._setuptouch(), m.options.callback.complete(g + 1)
          })) : i.stop().animate({
              left: e
          }, this.options.effect.slide.speed, function () {
              return i.css({
                  left: 0
              }), i.children(":eq(" + g + ")").css({
                  left: 0
              }), i.children(":eq(" + d + ")").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
              }, a.data(m, "current", g), a.data(m, "animating", !1), m.options.callback.complete(g + 1))
          }))
      }, d.prototype._fade = function (b) {
          var c, d, e, f, g, h = this;
          return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b ? (b -= 1, g = b &gt; d ? 1 : -1, e = b) : (g = "next" === this.data.direction ? 1 : -1, e = d + g), -1 === e &amp;&amp; (e = this.data.total - 1), e === this.data.total &amp;&amp; (e = 0), this._setActive(e), f = a(".slidesjs-control", c), f.children(":eq(" + e + ")").css({
              display: "none",
              left: 0,
              zIndex: 10
          }), this.options.callback.start(d + 1), this.options.effect.fade.crossfade ? (f.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed), f.children(":eq(" + e + ")").stop().fadeIn(this.options.effect.fade.speed, function () {
              return f.children(":eq(" + e + ")").css({
                  zIndex: 0
              }), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
          })) : f.children(":eq(" + d + ")").stop().fadeOut(this.options.effect.fade.speed, function () {
              return f.children(":eq(" + e + ")").stop().fadeIn(h.options.effect.fade.speed, function () {
                  return f.children(":eq(" + e + ")").css({
                      zIndex: 10
                  })
              }), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
          }))
      }, d.prototype._getVendorPrefix = function () {
          var a, b, d, e, f;
          for (a = c.body || c.documentElement, d = a.style, e = "transition", f = ["Moz", "Webkit", "Khtml", "O", "ms"], e = e.charAt(0).toUpperCase() + e.substr(1), b = 0; f.length &gt; b;) {
              if ("string" == typeof d[f[b] + e]) return f[b];
              b++
          }
          return !1
      }, a.fn[f] = function (b) {
          return this.each(function () {
              return a.data(this, "plugin_" + f) ? void 0 : a.data(this, "plugin_" + f, new d(this, b))
          })
      }
  })(jQuery, window, document)
  }).call(this);
  </code></pre>
  
  <p>I'm new to web and clueless using javascript. I'm trying to place a the navigation buttons (next, previous and play/pause) of the link below over the image but I can't figure it out!! I would really appreciate if someone could help? Also, is there a way on that same code of making it scale as the width and height change?</p>
  
  <p><a href="http://www.slidesjs.com/examples/standard/" rel="nofollow">http://www.slidesjs.com/examples/standard/</a></p>
  
  <p>Thanks very much!</p>