带有导航的背景图片幻灯片

Question

我正在尝试使用div的背景图像制作幻灯片，因为上面有一些元素。我的问题是我不知道该如何使用导航（按钮）来做到这一点-我只能做自动旋转。

这是代码和图片

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);
      });
    }

感谢所有愿意提供帮助的人