Public API demo

Example Usage



<button class="goto" data-goto-slide="0">Slide 1</button>
<button class="goto" data-goto-slide="1">Slide 2</button>
<button class="goto" data-goto-slide="2">Slide 3</button>
<button class="goto" data-goto-slide="3">Slide 4</button>
<button class="goto" data-goto-slide="4">Slide 5</button>

<script>
  var photoSlider = new WallopSlider('.photo-slider');

  // goTo API Usage
  var goToBtnClicked = function () {
    var slideNumber = this.getAttribute('data-goto-slide');
    photoSlider.goTo(slideNumber);
  };

  // Loop through buttons and attach click listener
  var goToBtns = document.querySelectorAll('.goto');
  for (var i = 0; i < goToBtns.length; i++) {
    goToBtns[i].addEventListener('click', goToBtnClicked);
  };
</script>