Javascript 中心响应滑块导航箭头在滑块中?
我的网站上有一个ResponsiveSlides滑块,我正试图使上一个/下一个导航箭头垂直居中于滑块的左右边缘 当我调整浏览器的大小时,它们会四处移动,右/下一个箭头似乎在滑块外悬挂了几个像素,并且在480px断点周围发生了一些奇怪的事情(一旦你移动到比480px小一点的位置,滑块就会比下面的列宽一点;另外,箭头会在屏幕下方更远处结束). 你可以现场观看 js 快速解决方案: 需要设置Javascript 中心响应滑块导航箭头在滑块中?,javascript,css,responsive-design,responsive-slides,Javascript,Css,Responsive Design,Responsive Slides,我的网站上有一个ResponsiveSlides滑块,我正试图使上一个/下一个导航箭头垂直居中于滑块的左右边缘 当我调整浏览器的大小时,它们会四处移动,右/下一个箭头似乎在滑块外悬挂了几个像素,并且在480px断点周围发生了一些奇怪的事情(一旦你移动到比480px小一点的位置,滑块就会比下面的列宽一点;另外,箭头会在屏幕下方更远处结束). 你可以现场观看 js 快速解决方案: 需要设置位置:相对,如下所示: <div class="col span_3_of_3" style="posi
位置:相对包含滑块和控件导航的父级上的代码>,如下所示:
<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>
…内容。。。
设置#滑块的父项(.col.span_3_of_3)的位置以及Varider提到的上一个/下一个相对链接只能解决部分问题
<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>
绝对定位元素相对于第一个父元素定位,该父元素的位置不是静态的
您的导航元素具有绝对定位,要使其工作,您需要将其容器位置属性设置为除静态之外的任何其他属性,正如其他答案所示。您真是不可思议!这是迄今为止我在这里得到的最好和最详细的答案,你的解释真的帮助我(希望)下次我能自己解决这个问题。非常感谢你们,也感谢所有插话的人。
.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);
}
<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>
<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>
.rslides_nav{
margin-top:-19.5px !important;
}
.col.span_3_of_3{
position:relative;
}