Center ResponsiveSlides nav arrows in slider?

Question

I have a ResponsiveSlides slider on my website, and I'm trying to get the previous/next navigation arrows to be centered vertically in the slider, on the left and right edges of it.

They currently move around as I resize my browser, the right/next arrow seems to hang outside the slider by a couple pixels, and there's something weird happening around the 480px breakpoint (once you go a tiny bit smaller than 480px, the slider is a little bit wider than the columns below; also, the arrows end up way further down the screen).

You can see it live here

js

<script src="js/responsiveslides.min.js"></script>
    <script>
        $(function() {
            $("#slider").responsiveSlides({
               auto: true,
               pager: false,
               nav: true,
            });
        });
    </script>

html

<div class="section group">
                <div class="col span_3_of_3">
                    <ul id="slider">
                        <li id="1"><img src="assets/slider/buzz-covers.jpg" alt="buzz covers"></li>
                        <li id="2"><img src="assets/slider/slab-happy.png" alt="slab happy"></li>
                        <li id="3"><img src="assets/slider/gridbook.jpg" alt="gridbook"></li>
                        <li id="4"><img src="assets/slider/ninth-spread.jpg" alt="ninth letter"></li>
                        <li id="5"><img src="assets/slider/slinkster.jpg" alt="slinkster"></li>
                        <li id="6"><img src="assets/slider/buzz-spread.jpg" alt="buzz spread"></li>
                    </ul>
                </div>
            </div>

css (not sure exactly which bits pertain to what I'm doing so here's everything slider related in my stylesheet)

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 1.5em 0 0 0;
  background-color: #f7f7f7;
  }

.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;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_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;
  }

.rslides_tabs .rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }

extramaster · Accepted Answer · 2014-03-08T08:03:12.570

Setting positioning of the parent (.col.span_3_of_3) of both #slider and the previous/next links to relative as mentioned by Varinder will only solve part of your problem.

<div class="col span_3_of_3" style="position: relative;">
    <ul id="slider" class="rslides rslides1">
        <li id="rslides1_s0" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;">
            <img src="assets/slider/buzz-covers.jpg" alt="buzz covers">
        </li>
        <li id="rslides1_s1" style="float: left; position: relative; opacity: 1; z-index: 2; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class="rslides1_on">
            <img src="assets/slider/slab-happy.png" alt="slab happy">
        </li>
        <li id="rslides1_s2" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class="">
            <img src="assets/slider/gridbook.jpg" alt="gridbook">
        </li>
        <li id="rslides1_s3" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class="">
            <img src="assets/slider/ninth-spread.jpg" alt="ninth letter">
        </li>
        <li id="rslides1_s4" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class="">
            <img src="assets/slider/slinkster.jpg" alt="slinkster">
        </li>
        <li id="rslides1_s5" style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;" class="">
            <img src="assets/slider/buzz-spread.jpg" alt="buzz spread">
        </li>
    </ul>
    <a href="#" class="rslides_nav rslides1_nav prev">Previous</a><a href="#" class="rslides_nav rslides1_nav next">Next</a>
</div>

The next part is to set margin-top to be -19.5px on ".rslides_nav" to fully center your slide navigation buttons vertically.

This solution stems from the fact that you already have a predefined margin-top for those links that make the buttons still slightly out of aligned when the browser is less then 420px wide.

So the solution to your problem would be to use the following CSS

.rslides_nav{
    margin-top:-19.5px !important;
}
.col.span_3_of_3{
    position:relative;
}

Side-by-side comparison

Demo

You're incredible! This is by far the best and most detailed answer I've ever gotten on here, and your explanation really helped teach me so (hopefully) I can solve this on my own next time. Thank you so much, and thanks to everyone else who chimed in as well. — Will Ryan, Mar 08 '14 at 16:45

score 3 · Answer 2 · answered Mar 08 '14 at 07:36

Quick solution:

You need to set position:relative; on parent that contains slider and the control nav like below:

<div class="col span_3_of_3" style="position: relative;">
    <ul id="slider" class="rslides rslides1">
        ...content...
    </ul>
    <a class="rslides_nav rslides1_nav prev" href="#">Previous</a>
    <a class="rslides_nav rslides1_nav next" href="#">Next</a>
</div>

score 2 · Answer 3 · answered Mar 08 '14 at 08:04

An absolute positioned element is positioned relative to the first parent element that has a position other than static.

Your navigation elements are given absolute positioning, for that to work, you need to set it's containers position property to anything other than static, as the other answers suggests.

Center ResponsiveSlides nav arrows in slider?

3 Answers3