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

时间:2019-04-30 14:46:43

标签: javascript vegasjs

我有一个非常简单的用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,或者是否从Vegas的JS和CSS中提取按钮

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

任何人都知道我该如何添加按钮吗?

1 个答案:

答案 0 :(得分:1)

我还没有测试过,但这可能会让您朝着正确的方向前进...

    $(document).ready(function() {
        $('select.cars').change(function(){
        $('.SubmitButton').addClass('ButtonColor'); 
        });
    });
----------------- OR--------------------
$(document).ready(function() {
        $('select.cars').on( 'change', function(){
        $('.SubmitButton').addClass('ButtonColor'); 
        });
    });