Add initial values to be used with arrows and pagination

[magicznyleszek]

Using the documentation I wrote a small gallery with arrows and dot navigation.

I give active class to current dot and disabled attribute for arrows on beginning and end of gallery:

// add listener for slideshow page change
flipsnap.element.addEventListener('fspointmove', function () {
    // if pagination exists change active classes
    if ($paginationElement) {
        $paginationElement.filter('.active').removeClass('active');
        $paginationElement.eq(flipsnap.currentPoint).addClass('active');
    }
    // if arrows exists change active classes
    if ($prev) {
        $prev.attr('disabled', !flipsnap.hasPrev());
    }
    if ($next) {
        $next.attr('disabled', !flipsnap.hasNext());
    }
}, false);

Unfortunately the disabled status and active class are not assigned when page is loaded. I have to remember to manually add them.

I was trying to trigger the change with flipsnap.moveToPoint(0), but it doesn't do anything. I could move to 1 and back again to 0, but it would be stupid. flipsnap.refresh() doesn't work either.

[hokaccha]

Try this.

flipsnap.element.dispatchEvent(new Event('fspointmove'));

see alos: Creating and triggering events - Web developer guide | MDN