[英]Center ResponsiveSlides nav arrows in slider?
我的網站上有一個ResponsiveSlides滑塊,我試圖讓上一個/下一個導航箭頭在滑塊的左右兩邊垂直居中。
當我調整瀏覽器大小時,它們當前移動,右邊/下一個箭頭似乎懸掛在滑塊外幾個像素,並且在480px斷點附近發生了一些奇怪的事情(一旦你小於480px,滑塊就是一個比下面的列稍微寬一些;同樣,箭頭最終向下進入屏幕。)
你可以在這里看到它
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(不確定哪些位與我正在做的事情有關,所以這里是我的樣式表中的所有滑塊相關)
.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);
}
如Varinder所述,將#slider和上一個/下一個鏈接的父級(.col.span_3_of_3)的位置設置為相對,只能解決部分問題。
<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” -19.5px
margin-top
設置為-19.5px
,以使垂直滑動導航按鈕完全居中。
這個解決方案源於這樣一個事實,即當瀏覽器寬度小於420px時,這些鏈接已經預先設置了margin-top,這使得按鈕仍然略微不對齊。
因此,您的問題的解決方案是使用以下CSS
.rslides_nav{
margin-top:-19.5px !important;
}
.col.span_3_of_3{
position:relative;
}
快速解決方案
你需要設置position:relative;
在包含滑塊和控件導航的父級上,如下所示:
<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>
絕對定位元素相對於具有靜態位置的第一父元素定位。
您的導航元素具有絕對定位,為了使其正常工作,您需要將其容器位置屬性設置為除靜態之外的任何內容,正如其他答案所示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.