Фоновое изображение слайд-шоу с навигацией - PullRequest
Новая
       18

Фоновое изображение слайд-шоу с навигацией

0 голосов

Я пытаюсь сделать слайд-шоу, используя фоновое изображение div, потому что на нем есть некоторые элементы. Моя проблема в том, что я не знаю, как сделать это с помощью навигации (кнопок), все, что я мог сделать - просто автоматический поворот.

Вот код и изображение

enter image description here

HTML
<div class="header-main">
        <div class="header-main__container">
            <div class="header-main__title">
                Lian Creative Agency
            </div>
            <!-- /.header-main__title -->
            <h2 class="header-main__subtitle">
                Minimal Freelance Portfolio
            </h2>
            <div class="prev-next-btns">
                <a href="#" class="prev-btn" onclick="prev()"></a>
                <a href="#" class="next-btn" onclick="next()"></a>
            </div>
            <!-- /.prev-next-btns -->
            <ul class="nav-btns">
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
            </ul>
        <!-- /.header-main-container -->
        </div>
    </div>
    <!-- /.header-main -->
SASS
    header-main
    position: relative
    background-image: url(../img/header/header-bg-1.png) no-repeat center
    background-size: cover
    height: 650px
    transition: 0.5s ease-in-out
JS
    var images=new Array('img/header/header-bg-1.png','img/header/header-bg- 
    2.png');
    var nextimage=0;
    doSlideshow();

    function doSlideshow(){
      if(nextimage>=images.length){nextimage=0;}
         $('.header-main')
         .css('background-image','url("'+images[nextimage++]+'")')
         .fadeIn(500,function(){
         setTimeout(doSlideshow, 10000);
      });
    }

Спасибо всем, кто попытается помочь

...