primary.sync(secondary); and secondary with breakpoints property destroy: true not showing or syncing correctly after resize

[adamintegra]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.4

Description

Syncing breaks after resize AND at least one primary navigation change (such as clicking an arrow to the right) when secondary is hidden because of destroy: true. This also causes the secondary navigation to disappear until the second resize.

Syncing will still work from primary interaction affecting the secondary, but not secondary interaction affecting the primary after that.

It appears directly related to the secondary breakpoints property of destroy: true.

All of our code (no custom buttons either):

const primary = new Splide(primaryCarousel, {
  type: 'fade',
  perPage: 1,
  perMove: 1,
  rewind: true,
  pagination: false,
  arrows: true,
  lazyLoad: 'nearby',
  mediaQuery: 'min',
  breakpoints: {
    1024: {
      arrows: false
    }
  }
});

const secondary = new Splide(secondaryCarousel, {
  fixedWidth: 100,
  fixedHeight: 100,
  gap: 40,
  perMove: 1,
  rewind: true,
  pagination: false,
  isNavigation: true,
  arrows: true,
  lazyLoad: 'nearby',
  keyboard: true,
  breakpoints: {
    767: {
      destroy: true
    },
    1024: {
      arrows: false
    }
  }
});

primary.sync(secondary);
primary.mount();
secondary.mount();

Reproduction Link

No response

Steps to Reproduce

1. Load the page with a viewport width of 768px or greater
2. Shrink the viewport to less than 768px
3. Navigate the primary to the right one slide with the arrow button
4. Resize the viewport back to 768px or greater
5. Notice the secondary is visually missing
6. Resize the viewport below 768px
7. Resize the viewport back to 768px or greater
8. Notice the secondary is visually back and interact-able, but won't sync with the primary

Expected Behaviour

Secondary navigation style syncs after breakpoint restoration using the destroy: true property.