Wikiki / bulma-carousel

Display a carousel
MIT License
136 stars 99 forks source link

how to re attach after loading new items #117

Open gentilmente opened 2 years ago

gentilmente commented 2 years ago

Hi. I'm in electron js I want to reload carousel items after user open a dir with images. I tried changing img src of already working carousel, works but of course this isn't dynamic

Then I tried to attach() after appending al items but it hangs the page in white. dev tools shows a modal saying

DevTools was disconnected from page.
Once page is reloaded, DevTools will automatically reconnect

I tried to use destroy() with no luck

gentilmente commented 2 years ago

OK

attachCarousel: () =>
    bulmaCarousel.attach('#carousel-demo', {
      slidesToScroll: 1,
      slidesToShow: 5,
    }),

hangs

but if I add {} to the arrow func it works, at least for the first time

attachCarousel: () => {
    bulmaCarousel.attach('#carousel-demo', {
      slidesToScroll: 1,
      slidesToShow: 5,
    });
  },

it could be something related with arrow func and this, isn't it?

gentilmente commented 2 years ago

well, destroy() calls nothing so a WORKARROUND

I was trying to delete ref to object to re attach, but always came back the same carousel obj. I found

  static attach(selector = '.slider', options = {}) {
    let instances = new Array();

    const elements = isString(selector) ? document.querySelectorAll(selector) : Array.isArray(selector) ? selector : [selector];
    [].forEach.call(elements, element => {
      if (typeof element[this.constructor.name] === 'undefined') {
        const instance = new bulmaCarousel(element, options);
        element[this.constructor.name] = instance;
        instances.push(instance);
      } else {
        instances.push(element[this.constructor.name]);
      }
    });

    return instances;
  }

and delete the if part always give me new bulmaCarousel and now I can re attach carousel for new images.