initialSlide not working

Hi,

So the idea of my slider is to have 4 sliders working together in sync to allow a sort of rolling effect.

I want sliders 1 2 & 3 to all start at different slides.

3 & 4 will be the same.

See here: Click me pls

However, when i set the initialSlide of sliders 1 & 2 (These are the faded out sliders to the left of the slider, the initial index will not apply.

However if i change the initialSlide of the main slider (Slider3) this updates just fine. Can you not have sliders synced and have different initialSlide’s on each of them?

This is my code (react)

class FeaturedNews extends React.Component {
    initialiseSlider = () => {
        const slider1 = this.slider1;
        const slider2 = this.slider2;
        const slider3 = this.slider3;
        const slider4 = this.slider4;

        const sharedSliderSettings = {
            speed: 500,
            loop: true,
            direction: 'vertical',
            simulateTouch: true,
            snapOnRelease: true,
            mousewheel: true,
            centeredSlides: true,
            spaceBetween: 36,
            slidesPerView: 1.5,
        }

        const swiper1 = new Swiper(slider1, {
            ...sharedSliderSettings,
            initialSlide: 5,
        });

        const swiper2 = new Swiper(slider2, {
            ...sharedSliderSettings,
            initialSlide: 2,
        });

        const swiper4 = new Swiper(slider4, {
            speed: 500,
            slidesPerView: 1,
            loop: true,
            virtualTranslate: true,
            loopFillGroupWithBlank: true,
            initialSlide: 1,
        });

        const swiper3 = new Swiper(slider3, {
            ...sharedSliderSettings,
            controller: {
                control: [
                    swiper1,
                    swiper2,
                    swiper4,
                ],
                by: 'container',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            freeModeSticky: true,
            freeMode: true,
            freeModeMomentumRatio: 0,
            freeModeMomentumVelocityRatio: 0,
            initialSlide: 1,
        });
    }

    render() {
        const { content } = this.props;

        return (
            <Div100vh>
                <Jacket>
                    <Row isExpanded isCollapsed isNotCollapsedOnLarge>
                        {/* Inactive Slider 1 */}
                        <Column showOnLarge large={4} pullOnLarge={2}>
                            <InactiveSlider ref={slider1 => (this.slider1 = slider1)}>
                                <div className="swiper-wrapper">
                                    {content.map((block, index) => {
                                        const src = block.node.featuredImage.fluid;
                                        const slug = '/news/' + block.node.slug;

                                        return (
                                            <Slide key={index} fade to={slug} className="swiper-slide">
                                                <Image>
                                                    <Img fluid={src} loading="eager" fadeIn={false} />
                                                </Image>
                                            </Slide>
                                        );
                                    })}
                                </div>
                            </InactiveSlider>
                        </Column>

                        {/* Inactive Slider 2 */}
                        <Column small={4} pullOnSmall={1} large={4} pullOnLarge={2}>
                            <InactiveSlider ref={slider2 => (this.slider2 = slider2)} reversed>
                                <div className="swiper-wrapper">
                                    {content.map((block, index) => {
                                        const src = block.node.featuredImage.fluid;
                                        const slug = '/news/' + block.node.slug;

                                        return (
                                            <Slide key={index} fade to={slug} className="swiper-slide">
                                                <Image>
                                                    <Img fluid={src} loading="eager" fadeIn={false} />
                                                </Image>
                                            </Slide>
                                        );
                                    })}
                                </div>
                            </InactiveSlider>
                        </Column>

                        {/* Interactive Slider 3 */}
                        <Column small={8} large={4} pullOnLarge={2}>
                            <ActiveSlider ref={slider3 => (this.slider3 = slider3)}>
                                <div className="swiper-wrapper">
                                    {content.map((block, index) => {
                                        const src = block.node.featuredImage.fluid;
                                        const { date } = block.node;
                                        const slug = '/news/' + block.node.slug;

                                        return (
                                            <Slide key={index} fade to={slug} className="swiper-slide">
                                                <Image>
                                                    <Img fluid={src} loading="eager" fadeIn={false} />
                                                </Image>

                                                <Date>{moment(date).format('D • MM • Y')}</Date>
                                            </Slide>
                                        );
                                    })}
                                </div>
                                <Paging className="swiper-pagination"></Paging>
                            </ActiveSlider>
                        </Column>
                    </Row>

                    <TitleSliderJacket>
                        <Row isExpanded>
                            <Column small={12} large={4} pushOnLarge={1}>
                                <TitleSlider ref={slider4 => (this.slider4 = slider4)}>
                                    <div className="swiper-wrapper">
                                        {content.map((block, index) => {
                                            const { title } = block.node;
                                            const { slug } = block.node;

                                            return (
                                                <TitleSlide key={index} className="swiper-slide">
                                                    <Link to={slug}>
                                                        <Title light>{title}</Title>
                                                    </Link>
                                                </TitleSlide>
                                            )
                                        })}
                                    </div>
                                </TitleSlider>
                            </Column>
                        </Row>
                    </TitleSliderJacket>
                </Jacket>
            </Div100vh>
        );
    }

    componentDidMount() {
        this.initialiseSlider();
    }
}

export default FeaturedNews;