dynamically adding and removing images/content to swiper carousel

[chetan-bbc]

We are using swiper library to implement carousel, we need help on how we can dynamically add the images/content to the carousel.

We tried it through asset manager, i.e. on double clicking swiper and by selecting the image we were able to add to carousel, but deleting after save was an issue.

Kindly can you help us with the examples or solution on how we can dynamically add and remove the images/content to/from swiper/carousel.

Thank you for your help in advance.

[mohamedsalem401]

Hey,
I think binding to event listeners might be a great way to keep Swiper and GrapesJS in sync. By listening to specific events, you can dynamically update the Swiper carousel whenever changes are made in the GrapesJS editor.

I've got little knowledge about swiper but I'll give you somewhat some psuodo code you can look at:

Syncing Data Using Event Listeners

You can use GrapesJS's built-in events to detect changes and update the Swiper instance. Below are some pseudo examples:

1. Adding Slides Dynamically

Listen to the component:add event to update Swiper when a new slide is added:

editor.on('component:add', (component) => {
  if (component.get('type') === 'swiper-slide') {
    const imageSrc = component.find('img')[0].get('attributes').src;
    // Add the new slide to Swiper
    swiper.appendSlide(`<div class="swiper-slide"><img src="${imageSrc}" /></div>`);
  }
});

2. Removing Slides Dynamically

Listen to the component:remove event to remove the corresponding slide from Swiper:

editor.on('component:remove', (component) => {
  if (component.get('type') === 'swiper-slide') {
    const slideIndex = component.index();
    // Remove the slide from Swiper
    swiper.removeSlide(slideIndex);
  }
});

3. Updating Slides on Save

Reinitialize or update Swiper when the storage:end event is triggered to handle changes after saving:

editor.on('storage:end', () => {
  // Destroy the existing Swiper instance
  swiper.destroy();

  // Reinitialize Swiper with the updated slides
  swiper = new Swiper('.swiper-container', {
    // Swiper configuration options
  });
});

4. Syncing Initial Data

When the editor loads, initialize Swiper with the existing slides in the GrapesJS canvas:

const swiperContainer = editor.getWrapper().find('[data-gjs-type="swiper-container"]')[0];
const slides = swiperContainer.components();

// Initialize Swiper with existing slides
let swiper = new Swiper('.swiper-container', {
  // Swiper configuration options
});

slides.forEach((slide) => {
  const imageSrc = slide.find('img')[0].get('attributes').src;
  swiper.appendSlide(`<div class="swiper-slide"><img src="${imageSrc}" /></div>`);
});