slick关联轮播鼠标上下滚动关联内容不对应如何解决？

Question

<div class="home-solution">
    <div class="home-solution-tit">
        <h2 class="h1">OUR SOLUTIONS</h2>
        <ul class="home-solution-tab">
            <?php while(have_rows('home-solutions-tab','option')):the_row(); ?>
                <li><?php the_sub_field('home-solution-cat') ?></li>
            <?php endwhile; ?>
        </ul>
    </div>
    <div class="home-solution-x">
        <?php while(have_rows('home-solutions-tab','option')):the_row(); ?>
            <div class="home-solution-x-x">
                <div class="home-solution-pic">
                    <?php
                        $solutions_pic = get_sub_field('home-solutions');
                        if($solutions_pic):
                    ?>
                    <?php
                        $args = array(
                            'post_type'        =>    'solution',
                            'post__in'        =>    $solutions_pic,
                            'posts_per_page'=>    6,
                        );
                        xizhitbu_diy_loop( $args, 'solution-pic' );
                    ?>
                    <?php endif; ?>
                </div>
                <div class="home-solution-ls">
                    <div class="home-solution-div">
                        <h2><?php the_sub_field('home-solution-cat') ?></h2>
                        <?php if(the_sub_field('home-solution-des')) {?>
                            <p><?php the_sub_field('home-solution-des') ?></p>
                        <?php }?>
                    </div>
                    
                        <div class="home-solution-title wheel-slick">
                            <?php
                                $solutions_tit = get_sub_field('home-solutions');
                                if($solutions_tit):
                            ?>
                            <?php
                                $args = array(
                                    'post_type'        =>    'solution',
                                    'post__in'        =>    $solutions_tit,
                                    'posts_per_page'=>    6,
                                );
                                xizhitbu_diy_loop( $args, 'solutions-tit' );
                            ?>
                            <?php endif; ?>
                        </div>
                </div>
                
            </div>
        <?php endwhile; ?>
    </div>
</div>

$('.home-solution-pic').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.home-solution-title',
});

$('.home-solution-title').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.home-solution-pic',
    dots: false,
    infinite: false,
    verticalSwiping: true,
    vertical: true,
    arrows: false,
    centerMode: true,
    autoplay: false,
    centerPadding: '0',
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                verticalSwiping: false,
                vertical: false,
                infinite: false,
                slidesToShow: 1,
                centerMode: false,
            }
        }
    ],
});

let blocked = false;
let blockTimeout = null;
let prevDeltaY = 0;

$(".wheel-slick").on('mousewheel DOMMouseScroll wheel', (function (e) {
    let deltaY = e.originalEvent.deltaY;
    e.preventDefault();
    e.stopPropagation();

    clearTimeout(blockTimeout);
    blockTimeout = setTimeout(function () {
        blocked = false;
    }, 50);

    if (deltaY > 0 && deltaY > prevDeltaY || deltaY < 0 && deltaY < prevDeltaY || !blocked) {
        blocked = true;
        prevDeltaY = deltaY;

        if (deltaY > 0) {
            $(this).slick('slickNext');
        } else {
            $(this).slick('slickPrev');
        }
    }
}));

将两个轮播关联起来了，然后鼠标滚动上下切换，功能可以实现但是内容不对应，有没有解决办法

尝试用过gsap但是失败了，有没有办法可以将关联的内容对应，然后鼠标滚动上下切换