title: ResponsiveSlides Navigation Buttons
body: <p>I am using ResponsiveSlides for a photo slideshow on a page, and I cannot make the navigation button show up as they do on the website. Currently, the Previous and Next links appear below the slider as simple hypertext links. Here is how this is showing on the website:
  <a href="https://i.stack.imgur.com/kgCXE.png" rel="nofollow noreferrer">website-slideshow</a>. See the Previous/Next buttons below image. Here is how I would like for this to look: <a href="https://i.stack.imgur.com/Na72Z.png" rel="nofollow noreferrer">navigation-buttons-centered</a>. I've tried so many different things and nothing is working, so any help would be appreciated.</p>
  
  <p>Here is the code that is being used:
  HTML:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="/wp/wp-content/themes/Avada-Child-Theme/responsiveslides.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(function() {
      $(".rslides").responsiveSlides({
        auto: true,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "rslides",
      });
    });
  
  &lt;/script&gt;
  &lt;link href="/wp/wp-content/themes/Avada-Child-Theme/css/responsiveslides.css" rel="stylesheet" type="text/css" /&gt;
  
  
  &lt;div class="rslides_container"&gt;
    &lt;ul class="rslides rslides1 centered-btns centered-btns1"&gt;
      &lt;li&gt;&lt;img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>(function($, window, i) {
    $.fn.responsiveSlides = function(options) {
  
      // Default settings
      var settings = $.extend({
        "auto": true, // Boolean: Animate automatically, true or false
        "speed": 500, // Integer: Speed of the transition, in milliseconds
        "timeout": 4000, // Integer: Time between slide transitions, in milliseconds
        "pager": true, // Boolean: Show pager, true or false
        "nav": true, // Boolean: Show navigation, true or false
        "random": false, // Boolean: Randomize the order of the slides, true or false
        "pause": false, // Boolean: Pause on hover, true or false
        "pauseControls": true, // Boolean: Pause when hovering controls, true or false
        "prevText": "Previous", // String: Text for the "previous" button
        "nextText": "Next", // String: Text for the "next" button
        "maxwidth": "", // Integer: Max-width of the slideshow, in pixels
        "navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the &lt;ul&gt;
        "manualControls": "", // Selector: Declare custom pager navigation
        "namespace": "rslides", // String: change the default namespace used
        "before": $.noop, // Function: Before callback
        "after": $.noop // Function: After callback
      }, options);
  
      return this.each(function() {
  
        // Index for namespacing
        i++;
  
        var $this = $(this),
  
          // Local variables
          vendor,
          selectTab,
          startCycle,
          restartCycle,
          rotate,
          $tabs,
  
          // Helpers
          index = 0,
          $slide = $this.children(),
          length = $slide.length,
          fadeTime = parseFloat(settings.speed),
          waitTime = parseFloat(settings.timeout),
          maxw = parseFloat(settings.maxwidth),
  
          // Namespacing
          namespace = settings.namespace,
          namespaceIdx = namespace + i,
  
          // Classes
          navClass = namespace + "_nav " + namespaceIdx + "_nav",
          activeClass = namespace + "_here",
          visibleClass = namespaceIdx + "_on",
          slideClassPrefix = namespaceIdx + "_s",
  
          // Pager
          $pager = $("&lt;ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' /&gt;"),
  
          // Styles for visible and hidden slides
          visible = {
            "float": "left",
            "position": "relative",
            "opacity": 1,
            "zIndex": 2
          },
          hidden = {
            "float": "none",
            "position": "absolute",
            "opacity": 0,
            "zIndex": 1
          },
  
          // Detect transition support
          supportsTransitions = (function() {
            var docBody = document.body || document.documentElement;
            var styles = docBody.style;
            var prop = "transition";
            if (typeof styles[prop] === "string") {
              return true;
            }
            // Tests for vendor specific prop
            vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
            prop = prop.charAt(0).toUpperCase() + prop.substr(1);
            var i;
            for (i = 0; i &lt; vendor.length; i++) {
              if (typeof styles[vendor[i] + prop] === "string") {
                return true;
              }
            }
            return false;
          })(),
  
          // Fading animation
          slideTo = function(idx) {
            settings.before(idx);
            // If CSS3 transitions are supported
            if (supportsTransitions) {
              $slide
                .removeClass(visibleClass)
                .css(hidden)
                .eq(idx)
                .addClass(visibleClass)
                .css(visible);
              index = idx;
              setTimeout(function() {
                settings.after(idx);
              }, fadeTime);
              // If not, use jQuery fallback
            } else {
              $slide
                .stop()
                .fadeOut(fadeTime, function() {
                  $(this)
                    .removeClass(visibleClass)
                    .css(hidden)
                    .css("opacity", 1);
                })
                .eq(idx)
                .fadeIn(fadeTime, function() {
                  $(this)
                    .addClass(visibleClass)
                    .css(visible);
                  settings.after(idx);
                  index = idx;
                });
            }
          };
  
        // Random order
        if (settings.random) {
          $slide.sort(function() {
            return (Math.round(Math.random()) - 0.5);
          });
          $this
            .empty()
            .append($slide);
        }
  
        // Add ID's to each slide
        $slide.each(function(i) {
          this.id = slideClassPrefix + i;
        });
  
        // Add max-width and classes
        $this.addClass(namespace + " " + namespaceIdx);
        if (options &amp;&amp; options.maxwidth) {
          $this.css("max-width", maxw);
        }
  
        // Hide all slides, then show first one
        $slide
          .hide()
          .css(hidden)
          .eq(0)
          .addClass(visibleClass)
          .css(visible)
          .show();
  
        // CSS transitions
        if (supportsTransitions) {
          $slide
            .show()
            .css({
              // -ms prefix isn't needed as IE10 uses prefix free version
              "-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
              "-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
              "-o-transition": "opacity " + fadeTime + "ms ease-in-out",
              "transition": "opacity " + fadeTime + "ms ease-in-out"
            });
        }
  
        // Only run if there's more than one slide
        if ($slide.length &gt; 1) {
  
          // Make sure the timeout is at least 100ms longer than the fade
          if (waitTime &lt; fadeTime + 100) {
            return;
          }
  
          // Pager
          if (settings.pager &amp;&amp; !settings.manualControls) {
            var tabMarkup = [];
            $slide.each(function(i) {
              var n = i + 1;
              tabMarkup +=
                "&lt;li&gt;" +
                "&lt;a href='#' class='" + slideClassPrefix + n + "'&gt;" + n + "&lt;/a&gt;" +
                "&lt;/li&gt;";
            });
            $pager.append(tabMarkup);
  
            // Inject pager
            if (options.navContainer) {
              $(settings.navContainer).append($pager);
            } else {
              $this.after($pager);
            }
          }
  
          // Manual pager controls
          if (settings.manualControls) {
            $pager = $(settings.manualControls);
            $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
          }
  
          // Add pager slide class prefixes
          if (settings.pager || settings.manualControls) {
            $pager.find('li').each(function(i) {
              $(this).addClass(slideClassPrefix + (i + 1));
            });
          }
  
          // If we have a pager, we need to set up the selectTab function
          if (settings.pager || settings.manualControls) {
            $tabs = $pager.find('a');
  
            // Select pager item
            selectTab = function(idx) {
              $tabs
                .closest("li")
                .removeClass(activeClass)
                .eq(idx)
                .addClass(activeClass);
            };
          }
  
          // Auto cycle
          if (settings.auto) {
  
            startCycle = function() {
              rotate = setInterval(function() {
  
                // Clear the event queue
                $slide.stop(true, true);
  
                var idx = index + 1 &lt; length ? index + 1 : 0;
  
                // Remove active state and set new if pager is set
                if (settings.pager || settings.manualControls) {
                  selectTab(idx);
                }
  
                slideTo(idx);
              }, waitTime);
            };
  
            // Init cycle
            startCycle();
          }
  
          // Restarting cycle
          restartCycle = function() {
            if (settings.auto) {
              // Stop
              clearInterval(rotate);
              // Restart
              startCycle();
            }
          };
  
          // Pause on hover
          if (settings.pause) {
            $this.hover(function() {
              clearInterval(rotate);
            }, function() {
              restartCycle();
            });
          }
  
          // Pager click event handler
          if (settings.pager || settings.manualControls) {
            $tabs.bind("click", function(e) {
                e.preventDefault();
  
                if (!settings.pauseControls) {
                  restartCycle();
                }
  
                // Get index of clicked tab
                var idx = $tabs.index(this);
  
                // Break if element is already active or currently animated
                if (index === idx || $("." + visibleClass).queue('fx').length) {
                  return;
                }
  
                // Remove active state from old tab and set new one
                selectTab(idx);
  
                // Do the animation
                slideTo(idx);
              })
              .eq(0)
              .closest("li")
              .addClass(activeClass);
  
            // Pause when hovering pager
            if (settings.pauseControls) {
              $tabs.hover(function() {
                clearInterval(rotate);
              }, function() {
                restartCycle();
              });
            }
          }
  
          // Navigation
          if (settings.nav) {
            var navMarkup =
              "&lt;a href='#' class='" + navClass + " prev'&gt;" + settings.prevText + "&lt;/a&gt;" +
              "&lt;a href='#' class='" + navClass + " next'&gt;" + settings.nextText + "&lt;/a&gt;";
  
            // Inject navigation
            if (options.navContainer) {
              $(settings.navContainer).append(navMarkup);
            } else {
              $this.after(navMarkup);
            }
  
            var $trigger = $("." + namespaceIdx + "_nav"),
              $prev = $trigger.filter(".prev");
  
            // Click event handler
            $trigger.bind("click", function(e) {
              e.preventDefault();
  
              var $visibleClass = $("." + visibleClass);
  
              // Prevent clicking if currently animated
              if ($visibleClass.queue('fx').length) {
                return;
              }
  
              //  Adds active class during slide animation
              //  $(this)
              //    .addClass(namespace + "_active")
              //    .delay(fadeTime)
              //    .queue(function (next) {
              //      $(this).removeClass(namespace + "_active");
              //      next();
              //  });
  
              // Determine where to slide
              var idx = $slide.index($visibleClass),
                prevIdx = idx - 1,
                nextIdx = idx + 1 &lt; length ? index + 1 : 0;
  
              // Go to slide
              slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
              if (settings.pager || settings.manualControls) {
                selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
              }
  
              if (!settings.pauseControls) {
                restartCycle();
              }
            });
  
            // Pause when hovering navigation
            if (settings.pauseControls) {
              $trigger.hover(function() {
                clearInterval(rotate);
              }, function() {
                restartCycle();
              });
            }
          }
  
        }
  
        // Max-width fallback
        if (typeof document.body.style.maxWidth === "undefined" &amp;&amp; options.maxwidth) {
          var widthSupport = function() {
            $this.css("width", "100%");
            if ($this.width() &gt; maxw) {
              $this.css("width", maxw);
            }
          };
  
          // Init fallback
          widthSupport();
          $(window).bind("resize", function() {
            widthSupport();
          });
        }
  
      });
  
    };
  })(jQuery, this, 0);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
  }
  
  .rslides li:first-child {
    position: relative;
    display: block;
    float: left;
  }
  
  .rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
  }
  
  .rslides1_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 50%;
    left: 0;
    z-index: 99;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("themes.gif") no-repeat left top;
    margin-top: -45px;
  }
  
  .rslides1_nav:active {
    opacity: 1.0;
  }
  
  .rslides1_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
  }
  
  .rslides1_nav:focus {
    outline: none;
  }
  
  .centered-btns_nav {
    z-index: 3;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 50%;
    left: 0;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("themes.gif") no-repeat left top;
    margin-top: -45px;
  }
  
  .centered-btns_nav:active {
    opacity: 1.0;
  }
  
  .centered-btns_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
  }
  
  a {
    color: #fff;
  }
  
  .rslides {
    margin: 0 auto;
  }
  
  .rslides_container {
    margin-bottom: 50px;
    position: relative;
    float: left;
    width: 100%;
  }
  
  .centered-btns_nav {
    z-index: 10;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 50%;
    left: 0;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("themes.gif") no-repeat left top;
    margin-top: -45px;
  }
  
  .centered-btns_nav:active {
    opacity: 1.0;
  }
  
  .centered-btns_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
  }
  
  .transparent-btns_nav {
    z-index: 3;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
    display: block;
    background: #fff;
    /* Fix for IE6-9 */
    opacity: 0;
    filter: alpha(opacity=1);
    width: 48%;
    text-indent: -9999px;
    overflow: hidden;
    height: 91%;
  }
  
  .transparent-btns_nav.next {
    left: auto;
    right: 0;
  }
  
  .large-btns_nav {
    z-index: 3;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0.6;
    text-indent: -9999px;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    background: #000 url("themes.gif") no-repeat left 50%;
    width: 38px;
  }
  
  .large-btns_nav:active {
    opacity: 1.0;
  }
  
  .large-btns_nav.next {
    left: auto;
    background-position: right 50%;
    right: 0;
  }
  
  .centered-btns_nav:focus,
  .transparent-btns_nav:focus,
  .large-btns_nav:focus {
    outline: none;
  }
  
  .centered-btns_tabs,
  .transparent-btns_tabs,
  .large-btns_tabs {
    margin-top: 10px;
    text-align: center;
  }
  
  .centered-btns_tabs li,
  .transparent-btns_tabs li,
  .large-btns_tabs li {
    display: inline;
    float: none;
    _float: left;
    *float: left;
    margin-right: 5px;
  }
  
  .centered-btns_tabs a,
  .transparent-btns_tabs a,
  .large-btns_tabs a {
    text-indent: -9999px;
    overflow: hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: #ccc;
    background: rgba(0, 0, 0, .2);
    display: inline-block;
    _display: block;
    *display: block;
    -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
    width: 9px;
    height: 9px;
  }
  
  .centered-btns_here a,
  .transparent-btns_here a,
  .large-btns_here a {
    background: #222;
    background: rgba(0, 0, 0, .8);
  }
  </code></pre>