Reputation: 1371
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