在Vegas滑块中为上一张和下一张幻灯片添加按钮

Question

I have very simple slider created with Vegas Slideshow. Now I'm trying to add simple Prev/Next buttons. This is the slider

    <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>

This works perfectly. It is showing the image and the caption bellow.

Now I've tried to add this for the buttons but nothing is appeared on page. There is no errors in console. I'm not sure also if I need to add the HTML for the buttons or it is pull them from the JS and CSS of the 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>

Anyone know how exactly I can add the buttons?

Answer 1

I haven't tested this, but it may get you heading in the right direction...

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