Sync multiple slider, but one slider had +1 index

[luiskabes-arch]

how can i sync multiple sliders, but one slider had a different index (+1) from all current index?

this is my current js code

// ============================
// Splide Initialization
// ============================
const splideElements = document.querySelectorAll('[data-splide]');

splideElements.forEach(function (element) {
    const options = JSON.parse(element.getAttribute('data-splide') || '{}');
    const splide = new Splide(element, options);

    // Synchronize sliders
    const syncTargets = element.getAttribute('data-sync');
    if (syncTargets) {
        const targetIds = syncTargets.split(',').map(id => id.trim());

        targetIds.forEach(targetId => {
            const syncTarget = document.querySelector(`#${targetId}`);
            if (syncTarget) {
                const syncTargetSplide = syncTarget.splide || new Splide(syncTarget).mount();
                splide.sync(syncTargetSplide);
            } else {
                console.warn(`Sync target with ID "${targetId}" not found.`);
            }
        });
    }

    // Handle main slider for preview sliders
    if (element.hasAttribute('data-splide-main')) {
        splide.on('move', function () {
            document.querySelectorAll('[data-preview]').forEach(function (previewElement) {
                const previewType = previewElement.getAttribute('data-preview'); // "next" or "prev"
                const previewSplide = previewElement.splide || new Splide(previewElement).mount();

                // Determine the slide increment or decrement
                let controlPattern;
                if (previewType === 'next') {
                    controlPattern = '+1'; // Increment by 1 for next
                } else if (previewType === 'prev') {
                    controlPattern = '-1'; // Decrement by 1 for previous
                }

                // Navigate the preview slider with controlPattern
                if (controlPattern) {
                    previewSplide.go(controlPattern, false, () => {
                        console.log(`Preview slider moved to index: ${previewSplide.index}`);
                    });
                }
            });
        });
    }

    splide.mount();
});

and this is my current structure template

<?php
$title = get_field('about-milestone_title');
?>

<section class="milestone">
    <div class="container">
        <div class="milestone-wrapper grid">
            <div class="milestone-content">
                <?php if ($title) : ?>
                    <h2 class="milestone-content__title"><?= $title ?></h2>
                <?php endif; ?>

                <?php if ( have_rows('about-milestone_list') ): ?>
                    <div id="milestone-year" class="milestone-content__years splide" aria-label="Milestone - Content" data-splide='<?= esc_attr(minified_json('
                    {
                        "type": "loop",
                        "perPage": 1,
                        "pagination": false,
                        "speed": 800,
                        "width": "32.5rem",
                        "easing": "cubic-bezier(0.83, 0, 0.17, 1)",
                        "arrowPath": "m23.08 7.506-12.08 12 12.08 11.998c.33.326.771.504 1.229.496a1.7 1.7 0 0 0 1.209-.543A1.8 1.8 0 0 0 26 30.195a1.8 1.8 0 0 0-.528-1.243l-9.516-9.447 9.516-9.457c.33-.326.52-.773.528-1.243a1.8 1.8 0 0 0-.482-1.262A1.7 1.7 0 0 0 24.308 7a1.7 1.7 0 0 0-1.228.496z",
                        "classes": {
                            "arrows": "milestone-content__arrows splide__arrows",
                            "arrow" : "milestone-content__arrow splide__arrow",
                            "prev"  : "milestone-content__arrow--prev splide__arrow--prev",
                            "next"  : "milestone-content__arrow--next splide__arrow--next"
                        }
                    }')); ?>'>
                        <div class="milestone-content__track splide__track">
                            <ul class="milestone-content__list splide__list">
                            <?php while( have_rows('about-milestone_list') ): the_row(); 
                                $year = get_sub_field('year');
                            ?>
                                <li class="milestone-content__item splide__slide">
                                    <div class="milestone-content__card">
                                        <h3 class="milestone-content__card-year"><?= $year ?></h3>
                                    </div>
                                </li>
                            <?php endwhile; ?>
                            </ul>
                        </div>
                    </div>

                    <div id="milestone-text" class="milestone-content__text splide" aria-label="Milestone - Text" data-sync="milestone-year, milestone-cover, milestone-thumb" data-splide='<?= esc_attr(minified_json('
                    {
                        "type": "loop",
                        "perPage": 1,
                        "pagination": false,
                        "arrows": false,
                        "speed": 800,
                        "easing": "cubic-bezier(0.83, 0, 0.17, 1)"
                    }')); ?>'>
                        <div class="milestone-content__track splide__track">
                            <ul class="milestone-content__list splide__list">
                            <?php while( have_rows('about-milestone_list') ): the_row(); 
                                $title = get_sub_field('title');
                                $description = get_sub_field('description');
                            ?>
                                <li class="milestone-content__item splide__slide">
                                    <div class="milestone-content__card">
                                        <h3 class="milestone-content__card-title"><?= $title ?></h3>
                                        <p class="milestone-content__card-description"><?= $description ?></p>
                                    </div>
                                </li>
                            <?php endwhile; ?>
                            </ul>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="milestone-media grid">
                <?php if ( have_rows('about-milestone_list') ): ?>
                <div id="milestone-cover" class="milestone-media__cover splide" aria-label="Milestone - Cover" data-sync="milestone-year, milestone-text, milestone-thumb" data-splide-main data-splide='<?= esc_attr(minified_json('
                    {
                        "type": "loop",
                        "perPage": 1,
                        "pagination": false,
                        "arrows": false,
                        "speed": 800,
                        "easing": "cubic-bezier(0.83, 0, 0.17, 1)"
                    }')); ?>'>
                    <div class="milestone-media__cover-track splide__track">
                        <ul class="milestone-media__cover-list splide__list">
                            <?php while( have_rows('about-milestone_list') ): the_row(); 
                                $cover = get_sub_field('cover');
                            ?>
                                <li class="milestone-media__cover-item splide__slide">
                                    <div class="milestone-media__cover-card">
                                        <img <?= responsive_image($cover['id'], 'full', '530'); ?> alt="<?= $cover['alt']; ?>" class="milestone-media__cover-card-image">
                                    </div>
                                </li>
                            <?php endwhile; ?>
                        </ul>
                    </div>
                </div>
                <div id="milestone-thumb" class="milestone-media__thumbnail splide" aria-label="Milestone - Thumbnail" data-sync="milestone-year, milestone-cover, milestone-text" data-preview="next" data-splide='<?= esc_attr(minified_json('
                    {
                        "type": "loop",
                        "perPage": 1,
                        "pagination": false,
                        "arrows": false,
                        "speed": 800,
                        "start": 1,
                        "easing": "cubic-bezier(0.83, 0, 0.17, 1)"
                    }')); ?>'>
                    <div class="milestone-media__thumbnail-track splide__track">
                        <ul class="milestone-media__thumbnail-list splide__list">
                            <?php while( have_rows('about-milestone_list') ): the_row(); 
                                $thumb = get_sub_field('cover');
                            ?>
                                <li class="milestone-media__thumbnail-item splide__slide">
                                    <div class="milestone-media__thumbnail-card">
                                        <img <?= responsive_image($thumb['id'], 'full', '300'); ?> alt="<?= $thumb['alt']; ?>" class="milestone-media__thumbnail-card-image">
                                    </div>
                                </li>
                            <?php endwhile; ?>
                        </ul>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

it's working for the first load and the first next navigation, but it's getting weird when do a prev navigation or the second next navigation, please take a look the video below

https://monosnap.com/file/okEPbaZ6PQ96Vg5pjnp9wPuLUDf9mx