Question

我在这个网页项目中创建了一个我需要的滑块，但是网页不是显示滑块，而是显示相互低于的全宽图像。

我正在使用jQuery Cycle2，这是我的代码：

HTML

<section>
    <div class="cycle-slideshow">
        <span class="cycle-prev">&#9001;</span>
        <span class="cycle-next">&#9002;</span>
        <span class="cycle-pager"></span>
        <img src="img/slider/1.jpg">
        <img src="img/slider/2.jpg">
        <img src="img/slider/3.jpg">
    </div>
</section>

CSS

/*----- CAROUSEL -----*/

.cycle-slideshow img {
    max-width: 100%;
}
.cycle-slideshow {
    margin-top: 15px;
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cycle-prev,
.cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 9999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 9999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
}
.cycle-pager .cycle-pager-active {
    background: #FFF;
}

有人可以帮我解决这个问题吗？不知道是什么导致了这个问题

jQuery Slider将图像显示在彼此之下

0 个答案: