mario francois
mario francois

Reputation: 1371

How to add slide with Embla without changing the current slide

I'm in Flutter InappWebview. I use PagedJs to paginate a html book. Once paginated I add slide to Embla. The pagniated html is already transform to a carousel. I add dynamically slide because pagnition is a long process. Everythings works fine if I start by the first chapter of the book. But If I start by chapter 9 the index is 0. I need to use "embla.containerNode().insertBefore(newSlide, slides[index]);" It show the last chapter added. I want a startIndex that keep a the current displayed page. I try to put just the index for startIndex but it's not working. How could I do it please?

function addSlide(content) {
  // If Embla Carousel is scrolling or dragging, do not add the slide
  if (isScrolling) {
    setTimeout(() => {
      addSlide(content);
    }, 300);
    return;
  }

  // Create a temporary div to parse the content
  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;
  var contentDiv = tempDiv.firstChild;

  // Extract chapter and page numbers from the custom attributes
  var chapterNumber = Number(contentDiv.getAttribute('chapter-number'));
  var pageIndex = Number(contentDiv.id.split('-').pop());

  // Create the new slide
  var newSlide = document.createElement('div');
  newSlide.className = 'embla__slide';
  newSlide.appendChild(contentDiv);

  // Find the position of the slide in the carousel
  var slides = Array.from(embla.containerNode().childNodes);
  var index = -1;

  console.log('Number of slides:', slides.length);

  for (var i = 0; i < slides.length; i++) {
    var slide = slides[i];
    var slideContent = slide.firstChild;
    var existingChapterNumber = Number(slideContent.getAttribute('chapter-number'));
    var existingPageIndex = Number(slideContent.id.split('-').pop());

    if (chapterNumber < existingChapterNumber || (chapterNumber === existingChapterNumber && pageIndex < existingPageIndex)) {
      index = i;
      break;
    }
  }


  // If no such position was found, append the slide to the end
  if (index === -1) {
    embla.containerNode().appendChild(newSlide);

  } else {
    // Otherwise, insert the slide at the correct position
    embla.containerNode().insertBefore(newSlide, slides[index]);
    startIndex++;
  }

  console.log('Current selected index:', startIndex);

  embla.reInit({ loop: false, startIndex: startIndex });
}

Upvotes: 1

Views: 910

Answers (0)

Related Questions