背景滑块img上的next/prev按钮

Question

我一直试图在滑块上创建next/prev箭头作为背景，但没有成功。

它必须有自动滑块与4-5秒的开关，但我想添加选项使用按钮/箭头和幻灯片背景。

有什么帮助吗？

HTML:

<div id="homepage">
    <div class="fadein">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
    </div>
</div>

CSS:

#homepage {
    background-color: black;
    height: 100vh;
    width: 100%;
}
.fadein {
    position: relative;
    height: 100%;
    width: 100%;
}
.fadein img {
    position:absolute;
    height: 100%;
    width:100%;
    z-index: 1;
    object-position: center;
}

JS:

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6000);
});

Answer 1

我为上一个/下一个操作创建了两个按钮：

<div id="homepage">
    <div class="fadein">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
    </div>

    <button onclick="previousSlide()">
      Previous
    </button>
    <button onclick="nextSlide()">
      Next
    </button>
</div>

然后，为每个按钮设置一个函数，或者，如果您愿意，可以用单个函数重构这两个函数：

<script>
function previousSlide() {
    $('.fadein :first-child').fadeOut().nextAll('img').fadeIn().end().appendTo('.fadein');
}

function nextSlide() {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
</script>

这就是您所要求的行为，现在如果您想使用img或div，只需为它们更改按钮即可。

Answer 2

 Here is the code to add previous/next actions.

<button id= "plus" class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
    <button id= "plus2"
            class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>