简体   繁体   中英

Adding prev/next buttons in Vegas slider

I have a simple slider which slides a few images and is using Vegas JS . This is what I have

<section class="slider fullwidth">

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

   <div id="buttons">
      <a href="#" id="previous"></a>
      <a href="#" id="next"></a>    
   </div>
</section>
$(".slider").vegas({
      slides: [
          { src: "slide-1.jpg", text: "Text 1" },
          { src: "slide-2.jpg", text: "Text 2" }
      ],
      walk: function (index, slideSettings) {
          $('.caption').html(slideSettings.text);
      }
});

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

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

The code above produces the slider and both slides + the caption are changed but the buttons are not working.

When I click on Next or Previous the error that I get in the console is

Uncaught ReferenceError: $elmt is not defined

I have tried to follow their documentation here: https://vegas.jaysalvat.com/documentation/methods/

而不是$elmt.vegas尝试使用$(".slider").vegas

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM