Кнопки «Следующая / Предыдущая» на заднем слайдере - PullRequest
Новая
       12

Кнопки «Следующая / Предыдущая» на заднем слайдере

0 голосов
/ 09 мая 2018

Я пытался создать стрелки следующего / предыдущего на слайдере в качестве фона, но безуспешно.

Это должен быть автоматический слайдер с переключателем 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);
});

Ответы [ 2 ]

0 голосов
/ 09 мая 2018 
 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>
0 голосов
/ 09 мая 2018

Я создал две кнопки для предыдущих / следующих действий: 

<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 вместо этого, вам просто нужно изменить кнопки для них.

...