javascript - Center ResponsiveSlides nav arrows in slider? - Stack Overflow

admin管理员组

文章数量:1350327

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

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

• javascript
• css
• responsive-design
• responsive-slides

Share Improve this question Follow edited Mar 8, 2014 at 10:39 zoranc 2,45611 gold badge2222 silver badges3434 bronze badges asked Mar 8, 2014 at 7:26 Will RyanWill Ryan 1,82544 gold badges1919 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

Demo

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>

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.

本文标签： javascriptCenter ResponsiveSlides nav arrows in sliderStack Overflow