Jquery 非滑动箭头格式_Jquery_Html_Css_Unslider

Jquery 非滑动箭头格式

jquery html css

Jquery 非滑动箭头格式,jquery,html,css,unslider,Jquery,Html,Css,Unslider,我试图在我的网站上使用Unslider，但是上一个/下一个箭头错误地放置在滑块底部的两侧，而不是中间。我没有对unslidercss做任何更改，只是对myslider容器进行了样式化我不知道如何在不使用绝对位置的情况下将箭头放在内容容器的中心。你能不能建议一下，有什么问题以下是我所拥有的： <html> <body> <header> <div class="content"> <div c

我试图在我的网站上使用Unslider，但是上一个/下一个箭头错误地放置在滑块底部的两侧，而不是中间。我没有对unslidercss做任何更改，只是对myslider容器进行了样式化

我不知道如何在不使用绝对位置的情况下将箭头放在内容容器的中心。你能不能建议一下，有什么问题

以下是我所拥有的：

<html>
<body>
    <header>
        <div class="content">
            <div class="left">
                Originální pouzdra a obaly<br/>
                Tvorba portfolia<br/>
                Fotoalba<br/>
                Autorské knihy
            </div>
            <div class="logo"><a href=""><img src="img/logo.png"></a></div>
            <div class="right">
                Soukupová Petra<br/>
                soukupova.petra@gmail.com<br/>
                +420 123 456 789
            </div>
        </div>
    </header>

        <div class="content">
            <section>
                <div class="my-slider">
                    <ul>
                        <li><img src="img/petra_soukopova_projekt1.jpg" alt="Projekt 1"></li>
                        <li>Another slide</li>
                        <li>My last slide</li>
                    </ul>
                </div>
            </section>

            <section>
                Bla Bla Bla
            </section>

            <section>
                Bla Bla Bla
            </section>
        </div>

    <footer></footer>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="js/unslider.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('.my-slider').unslider();
        });
    </script>

</body>
</html>

不滑动css：

.unslider{overflow:auto;margin:0;padding:0}

.unslider-wrap{position:relative}

.unslider-wrap.unslider-carousel>li{float:left}

.unslider-vertical>ul{height:100%}

.unslider-vertical li{float:none;width:100%}

.unslider-fade{position:relative}

.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}

.unslider-fade .unslider-wrap li.unslider-active{z-index:10}

.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}

.unslider-arrow{
    position:absolute;
    left:120px;
    z-index:2;
    cursor:pointer;
}

.unslider-arrow.next{left:auto;right:120px}

.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}

@罗布斯科特，我刚想出来。我在外部内容类中缺少位置：相对。再次感谢

我可以问一下为什么你不“或不能”想使用

位置：绝对。这是迄今为止基于容器将元素居中的最简单方法。另外，设置JSFIDLE会让您更快地得到帮助。您应该将滑块视为显示数据的容器，最终让用户控制显示的内容。除了滑块容器（它应该从文档流中占用必要的空间）之外，没有任何一点（我知道）不应该使用position:absolute用于定位任何滑块组件，无论是滑块还是控件。事实上，位置：绝对
是迄今为止显示滑块内容的最佳方式，在设置动画时，不会有任何负面影响。您能否澄清为什么不希望此特定属性对给定组件具有此特定值？另一方面，您添加了您使用的代码非常好，但请注意，如果您使用snippet工具（按钮），用户可以更容易地提供帮助根据问题中已输入的代码创建一个。如果不这样做，你就有了选择帮助你的人，增加了为你的问题提供答案所需的努力。@RobScott谢谢你的评论。实际上，这并不是我不想使用绝对位置，我不知道如何使用绝对位置来将元素定位到特定容器的中心-当我使用top:50%时；它只是将箭头指向整个页面的中心，而不是滑块容器的中心。谢谢你的建议。@AndreiGheorghiu谢谢你的提醒，我以后一定会用的。
.unslider{overflow:auto;margin:0;padding:0}

.unslider-wrap{position:relative}

.unslider-wrap.unslider-carousel>li{float:left}

.unslider-vertical>ul{height:100%}

.unslider-vertical li{float:none;width:100%}

.unslider-fade{position:relative}

.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}

.unslider-fade .unslider-wrap li.unslider-active{z-index:10}

.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}

.unslider-arrow{
    position:absolute;
    left:120px;
    z-index:2;
    cursor:pointer;
}

.unslider-arrow.next{left:auto;right:120px}

.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}