0

I'm using a single page scroll with dot navigation which works perfectly, but cannot work with a header navigation. I'm using the script from https://github.com/fabeat/responsive-fullpage-scroll in a bootstrap 5.3 page and the script creates an object as follows:

document.addEventListener("DOMContentLoaded", function() {
  var wrap = document.getElementById('wrap');
  var fps = new FullPageScroll(wrap);
  var indicator = document.createElement('div');
  indicator.id = 'indicator';
  var slideIndicators = [];
  fps.slides.forEach(function(slide, index){
    var slideIndicator = document.createElement('div');
    slideIndicator.onclick = function() {
      fps.goToSlide(index);
    }
    if (index === fps.currentSlide) {
      slideIndicator.className = "active";
    }
    indicator.appendChild(slideIndicator);
    slideIndicators.push(slideIndicator);
  });
  document.body.appendChild(indicator);
  fps.onslide = function() {
    slideIndicators.forEach(function(slideIndicator, index) {
      if (index === fps.currentSlide) {
        slideIndicator.className = "active";
      } else {
        slideIndicator.className = "";
      }
    });
  }
  fps.addEventListener('slide', function(e) {
    console.log("Slide "+(e.target.currentSlide+1)+" of "+e.target.slides.length);
    console.log
  });
}); 

What I figured is that I should probably not use the a tag in the bootstrap header navigation and instead run an onclick function similar to this:

<li style="margin-top:10px;"><a class="dropdown-item" href="#" onclick="someFunction(); return false;"><strong>Vision</strong></a></li>

The FullPageScroll Object fps has a goToSlide() method that should be usable here but for the life of me, I don't know how to write this function that can access fps.goToSlide(index). I keep getting an error of a function that is not defined.

If I do not use this specific object, the dot navigation breaks and disappears until I reload the page so whatever page scroll link I use in my Nav needs to use this object.

Kumar S
  • 1
  • 1

0 Answers0