Добавление кнопок для предыдущего и следующего слайда в слайдере Vegas

Question

У меня очень простой слайдер, созданный с помощью Vegas Slideshow. Сейчас я пытаюсь добавить простые кнопки «Предыдущая / Следующая». Это слайдер

    <div class="slide-caption"></div>


    <script src="/assets/js/jquery-3.4.0.min.js"></script>
    <script src="/assets/js/vegas.min.js"></script>
    <script>
        $(".slider-wrapper").vegas({
            slides: [
                { src: "/assets/images/slide-1.jpg", text: "Deployment" },
                { src: "/assets/images/slide-1.jpg", text: "Deployment" },
            ],
            walk: function (index, slideSettings) {
                $('.slide-caption').html(slideSettings.text);
            }
        });
    </script>

Это работает отлично. Это показывает изображение и подпись ниже.

Сейчас я попытался добавить это для кнопок, но на странице ничего не появилось. В консоли нет ошибок. Я также не уверен, нужно ли мне добавлять HTML-код для кнопок или он вытягивает их из JS и CSS из Vegas

    <script>
        $(".slider-wrapper").vegas({
            slides: [
                { src: "/assets/images/slide-1.jpg", text: "Deployment" },
                { src: "/assets/images/slide-1.jpg", text: "Deployment" },
            ],
            walk: function (index, slideSettings) {
                $('.slide-caption').html(slideSettings.text);
            }
        });

         // buttons
        $('a#previous').on('click', function () {
        $elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
        });

        $('a#next').on('click', function () {
            $elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
        });
    </script>

Кто-нибудь знает, как именно я могу добавить кнопки?

Answer 1

Я не проверял это, но это может заставить вас двигаться в правильном направлении ...

HTML...
<div id="previous" class="button"></div>
<div id="next" class="button"></div>


JQUERY...
    <script>
    $("#previous").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});

$("#next").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('next');
});

</script>       
CSS...
.button {
display: block;
height: 100px;
width: 100px;
background-color: purple;
 }