0

我正在尝试在我的网站上使用 Unslider，但上一个/下一个箭头错误地放置在滑块底部的两侧，而不是在中心。我没有对 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;
}

取消滑动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;
}
4

1 回答 1

0

@RobScott 我刚刚想通了。我缺少 position: relative 在外部内容类中。再次感谢！

于 2017-03-09T13:19:15.560 回答