React Swiper - Make adjacent slide to active slide while clicking on the adjacent slide

[smithdwaynejes]

I am using react Swiper in my project. I need to show only two slides with cover flow effect and 30 degrees rotation as follows. But It showing only one side as the active slide all the time. I want to make an adjacent slide to an active slide while clicking that particular slide.

<Swiper
    spaceBetween={50}
    pagination={{ clickable: true }}
    slidesPerView={3}
    effect="coverflow"
    slideToClickedSlide={true}
    coverflowEffect={{slideShadows: false,rotate: 30}}
>
    {(list||[]).map((itm, idx)=>(
        <SwiperSlide key={idx}>
            <SliderCardItem
                img={itm.image}
                title={itm.title}
                points={itm.points}
                buttonText={itm.buttonText}
                cardId={itm.cardId}
                buttonClick={clickCallback}
            />
        </SwiperSlide>
    ))}

I want to make the Education slide to active slide while clicking on the Education slide. Is there any way to do this?

My same question posted in stackoverflow.

[ajaypillay]

Just a suggestion of something to try.

But as per the Swiper React docs you could pass isPrev and isNext to the slides. Attach a ref to the Swiper component, and pass down a function something like slideTo(index). Attach an onClick handler to each of the SliderCardItems, then you could do:

if (isPrev || isNext)
    slideTo(thisIndex)

That might work.