Events fired when using tiny-slider

[elisabetperez]

Hello everyone,

Our team has successfully created 4 or 5 websites using Swup and we encountered and overcame most of the common issues associated with it. However, I'm currently working on a much larger project, and I'm facing a new challenge.

I encountered two problems. I fixed one, but it doesn't solve the overlaying main issue where contentReplaced and willReplaceContent are being executed on the homepage after navigating back to it from any of the chapters.

The problem is explained in this Loom I recorded here

I also created a codesandbox here

I would greatly appreciate any insights or suggestions you may have for addressing this issue.

cc @andresclua

[daun]

Hi @elisabetperez! Two things come to mind:

1. It's not necessary or useful to add a timeout to willReplaceContent — any code executed inside the timeout callback will be run on the content of the new page, while I assume your goal is to iterate over the sliders on the old page. Currently, you're creating slider instances in contentReplaced, only to destroy them 500ms later in the timeout callback of willReplaceContent.
2. You're conditionally logging contentReplaced only if sliders are found on the page, while you're always logging willReplaceContent before checking if there are sliders on the page. If you either log both unconditionally or both only when applicable, you should see slightly more useful debug output in your console.

[elisabetperez]

hey @daun,
1 - as you can see in the loom I recorded, if I do not add the timeout in willReplaceContent, after changing the page I get a log that says a page with no slider has 1 slider. It's in the video.
2 - In my Core.js you can see that I do the same verifications in contentReplaced and willReplaceContent:

 if (document.querySelectorAll(".c--slider-a").length) {

[daun]

@elisabetperez

1 — You might experiment with adding a classname to initialized sliders, e.g. is-setup. You can then query by .c--slider-a:not(.is-setup) to get a clear picture of what elements you're pulling in there and to see if you've already initialized them. As it stands, you're currently getting the new sliders because of the timeout while you're trying to get the old sliders.

2 — Looking at the linked CodeSandbox, one console log is outside of the conditional, the other one is inside the conditional. If you've changed it locally in the time since creating the sandbox and you're getting the same output, feel free to ignore my comment.

[daun]

The below code should work. I've made a few adjustments, namely to store the actual slider instances in the array, so you don't have to go by the array index, and removing the timeout. Also, the async keyword wasn't required on the method, but that shouldn't have been an issue.

class Core {
 contentReplaced() {
    this.instances["SliderA"] = [];
    document.querySelectorAll(".c--slider-a").forEach((element, index) => {
      this.instances["SliderA"].push(new SliderA({ container: ".c--slider-a__wrapper", controls: ".c--slider-a__controls" }));
    });
  }
  willReplaceContent() {
    this.instances["SliderA"].forEach((instance) => instance.destroy());
  }
}

[elisabetperez]

Hello again! I did as you suggested and I'm getting the tiny-slider error I was getting in the first loom I sent over here ^
Anyways, here's a new loom with the error. I also tried encapsultaing your lines inside an if conditional, just in case. No positive results.

I'm also attaching my code for SliderA, I know the error is coming from "autoplayHoverPause: true" because the page is looking for a slider to add the listener to.

// sliderA.js
import { tns } from "/node_modules/tiny-slider/src/tiny-slider.js";

class SliderA {
  constructor(payload) {
    this.sliderA;
    this.init(payload);
  }

  init(payload) {
    this.sliderA = tns({
      container: '.c--slider-a__wrapper',
      loop: true,
      items: 1,
      gutter: 56,
      slideBy: 1,
      controls: true,
      controlsContainer: payload.controls,
      nav: false,
      rewind: false,
      swipeAngle: 60,
      lazyload: true,
      autoplay: true,
      mouseDrag: true,
      autoplayButtonOutput: false,
      speed: 2000,
      autoplayTimeout: 4000, 
      autoplayHoverPause: true,
      responsive: {
        580: {
          items: 2,
        },
        1300: {
          items: 3,
        },
      },
    });
  }

  destroy() {
    if (this.sliderA) {
      this.sliderA.destroy();
    }
  }
}

export default SliderA;

Thank you!

[daun]

Looks like it's an issue with the tiny-slider library you're using. It seems to not cancel its timeouts even when destroying the instance. Not sure if that can be fixed using timeouts or swup events. There's an open issue with a few workarounds, but hard to say whether that would help.

[elisabetperez]

wow, Phillip, thank you so much. I was able to fix this! I'd never have thought this was due to that one line in SliderA. I was convinced it was due to instances not being resolved correctly. Thank you thank you so much! You can mark this one as solved!

[daun]

Wonderful! Glad you got it solved.