Sunday, 28 March 2021

Flickity & Swup - destroying flickity

I am trying to destroy and re-load my Flickity slideshow while using Swup for page transitions, and I am not having much luck. This is my js file:

import Swup from 'swup';

var Flickity = require('flickity');

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    var flkty = new Flickity('.testimonials-slideshow', {
      wrapAround: true,
      pageDots: false,
      autoPlay: true,
      arrowShape: 'M68.374,83.866L31.902,50L68.374,16.134L64.814,12.3L24.214,50L64.814,87.7L68.374,83.866Z'
    });
  }
}

function unload() {
  flkty.destroy();
}

init();

const swup = new Swup();

swup.on('contentReplaced', init);

swup.on('willReplaceContent', unload);

But when I try this I get the error flkty is not defined. Can anyone give me any pointers on this?



from Flickity & Swup - destroying flickity

No comments:

Post a Comment