Question

我试图在我的网站上使用Unslider，但是prev / next箭头错误地放在滑块底部的两侧，而不是放在中间。我没有对Unslider CSS做任何更改，只是设置了my-slider容器。

我无法弄明白，如何在不使用绝对位置的情况下将箭头放在内容容器的中心。能否请您提出建议，可能是什么问题？

这就是我所拥有的：

<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：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }
img {
    max-width: 100%;
}

header {
    width:100%;
    height: auto;
}

.content {
    width: 1052px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-bottom: 20px;
}

.left {
    display: inline-block;
    position: relative;
    width: auto;
    left: 0;
    text-align: left;
    vertical-align: top;
    z-index: 2;
}

.right {
    display: inline-block;
    position: relative;
    float: right;
    width: auto;
    text-align: right;
    vertical-align: top;
    z-index: 2;
}

.logo {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 1;
}

section {
    display: block;
    height: auto;
}

.my-slider {
    height: auto;
    max-width: 100%;
    display: block;
    position: relative;
}

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

Answer 1

@RobScott我刚刚想通了。我错过了位置：外部内容类中的相对位置。再次感谢！

取消滑动箭头格式

1 个答案: