Linked swiper-containers skip a slide when hitting next/back button

[ZeroRWV]

Hi,

I created a concept where an image and it's title caption exist in their own , but are linked by a controller-control attribute. Reason is because I want to position the next button vertically centered to the image and doing that with js is just such a pain. So, I got my linked sliders working nicely on mouse drag or on gesture drag on a phone, but the next or back button always makes it skip a slide, no matter what I change to slidesPerView. I have three slides in my current setup, which are looped.

I hope anyone is able to help me with the issue. It did not exist when I was not using a single , rather than two linked.

My work in progress:

          <swiper-container init="false" class="swiper title-swiper" controller-control=".image-swiper">

                <?php
                    // Custom WP_Query to fetch all 'uxui' posts
                    $args = array(
                        'post_type'      => 'report',
                        'posts_per_page' => -1,
                        'orderby'        => 'date',
                        'order'          => 'DESC', // DESC for descending order (newest first), ASC for ascending  
                    );
                    $uxui_query = new WP_Query($args);

                    // Loop through the query results
                    if ($uxui_query->have_posts()) :
                        while ($uxui_query->have_posts()) :
                            $uxui_query->the_post();
                            // Include the single-uxui.php template for each 'uxui' post
                            get_template_part('custom-reetje/single', 'report', array('is_image' => true));
                        endwhile;
                        wp_reset_postdata();
                    else :
                        echo 'No reports found';
                    endif;
                    ?>
            </swiper-container>

            <swiper-container init="false" class="swiper image-swiper" controller-control=".title-swiper">

                <?php
                $uxui_query = new WP_Query($args);

                // Loop through the query results
                if ($uxui_query->have_posts()) :
                    while ($uxui_query->have_posts()) :
                        $uxui_query->the_post();
                        // Include the single-uxui.php template for each 'uxui' post
                        get_template_part('custom-reetje/single', 'report', array('is_image' => false));
                    endwhile;
                    wp_reset_postdata();
                else :
                    echo 'No reports found';
                endif;
                ?>
            </swiper-container>

 
            <button class="swiper-custom-button-next bt">
                <div class="button-behind"></div>
                <div class="arrow"></div>
            </button>
            <button class="swiper-custom-button-prev bt">
                <div class="button-behind"></div>
                <div class="arrow"></div>
            </button>
   

            <script>
            // swiper elements
            const imageSwiperEl = document.querySelector('.image-swiper');
            const titleSwiperEl = document.querySelector('.title-swiper');

            // swiper parameters
            const swiperParams = {
                slidesPerView: 1.9,
                loop: true,
                navigation: {
                    nextEl: '.swiper-custom-button-next',
                    prevEl: '.swiper-custom-button-prev',
                },
                breakpoints: {
                    1600: {
                        slidesPerView: 1.9,
                    },
                    1024: {
                        slidesPerView: 1.5,
                    },
                    769: {
                        slidesPerView: 1.3,
                    },
                },

            };

            // now we need to assign all parameters to Swiper elements
            Object.assign(imageSwiperEl, swiperParams);
            Object.assign(titleSwiperEl, swiperParams);

            // Initialize the swipers
            const imageSwiper = imageSwiperEl.initialize();
            const titleSwiper = titleSwiperEl.initialize();
            

            //---------------end swiper
            </script>

[ZeroRWV]

I can mark this as solved: navigation event listener was added twice to the buttons, because both shared the samse swiperParams. I split the parameters by declaring two different variables titleSwiperParams and imageSwiperParams. Left out navigation from one of them and voila.