Добавление кнопок «Предыдущая» и «Предыдущая» на слайдер изображений

0

Я хотел бы добавить следующую и предыдущую кнопку в свой слайдер изображений, но я не уверен, как это сделать, потому что я не знаю, как добавить их в слайдер автоматической игры. У меня есть базовая структура, любая помощь?

Мой HTML:

<div id="slider-container">
<div style="position: relative">
  <div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
  <div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
  <div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
  <div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
  <div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
  <div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
<img id="previous" src="images/prev.png">
<img id="next" src="images/next.png">

Мой CSS:

.slide-container 
{
display: block; 
}

.slide
{
top: 0;
width: 760px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s 
}

.slide img 
{
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px solid #95ca1a;
}

Мой jQuery:

$(document).ready(function() {
    (function (){

    var count = $(".slide > img").length;
    var current = 1;
    var sliderNext = 2;

    $("img[id^='slide_']").fadeOut(0);
    $("#slide_" + current).fadeIn(300);
    var loop = setInterval(function() {
        $("#slide_" + current).fadeOut(300);
        $("#slide_" + sliderNext).fadeIn(300);

        $('#next').click(function(){
        $("img[id^='slide_']" + sliderNext).fadeIn(300);

        (sliderNext >= count) ? sliderNext = 1 : sliderNext++;
        (current >= count) ? current = 1 : current++;
    }, 3000)
})()
});
  • 1
    (function (){})() - это не нужно в $(document).ready() . Он выполняется, когда он анализируется, а не на domready.
  • 1
    Рассматривали ли вы загрузочную карусель? getbootstrap.com/javascript/#carousel
Показать ещё 1 комментарий

1 ответ

0

Вам нужно реорганизовать свой код, можно было бы переместить текущую функцию setInterval в следующую функцию изображения, а затем создать предыдущую функцию изображения. При щелчке вы хотите повторно инициализировать свой таймер, а затем запустить правильную предыдущую или следующую функцию.

  • 0
    Любая идея, как повторно инициализировать таймер, чтобы продолжить работу с автовоспроизведением?
  • 0
    Настройте jsfiddle для своего слайдера, и я помогу

Ещё вопросы

Сообщество Overcoder
Наверх
Меню