图层滑块导航位置

Question

我在一个使用 Layer Slider 的网站上工作。我正在尝试定位导航箭头，如图所示。但是对于我写的任何东西，我 CSS 都不会影响导航箭头的外观。

如果您将鼠标悬停在图像上，则可以看到导航。

请原谅我无法post相同的代码。

可以访问网站Here。

有人可以帮我吗？

Answer 1

尝试在 a.ls-nav-prev 和 a.ls-nav-next like

上使用绝对定位

    a.ls-nav-prev,a.ls-nav-prev{
       position: absolute;
    }

现在上一个箭头使用 "left:"，下一个使用 "right:" 属性

Answer 2

在与滑块相同的 div 中，您可以尝试这样的操作：

<div>
   <!-- Slider here -->
   <a href="#" class="left-arrow"><img src="arrow-left.png"/></a>
   <a href="#" class="right-arrow"><img src="arrow-right.png"/></a>
</div>

在你的 css 上：

.left-arrow {
  position: absolute;
  top : 50%
  left: 0px;
}

.right-arrow{
 position: absolute;
 top:50%
 right:0px;
}

Answer 3

试试这个：

a.ls-nav-prev {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

a.ls-nav-next {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

如果您使用它而不是 top:50%，您的箭头将完全垂直对齐。 top:50% 它们将不对齐。

下次请 post 一些您尝试实现的代码。

Answer 4

a.ls-nav-prev, a.ls-nav-next {
    margin-left: 0% !important;
    display: block !important;
    position: absolute;
    top: 50%;
}

a.ls-nav-next{
    right: 0px;
}

Answer 5

也许你可以试试这个方法。

.container{
    position:relative;
    width:500px;
    height:200px;
}

.slider{
    height:100%;
    width:100%;
    background-color:#EEE;
}

.carouselController{
    position:absolute;
    top:0px;
    bottom:0px;
    width:10%;
    text-align:center;
    top:50%;
    margin-top:-9px; /*Depends on your icon height*/
}
.leftContainer{
    left:0px;
}

.rightContainer{
    right:0px;
}

<div class="container">
    <div class="slider"></div>
    <div>
        <div class="leftContainer carouselController">
            <i><</i>
        </div>
        <div class="rightContainer carouselController">
            <i>></i>
        </div>
    </div>
</div>

图层滑块导航位置

Layer Slider Navigation Position

html

css

jquery

slider