• The code about the testimonials section on the website is as seen in the video.

• I am getting a strange error that when I scroll the cards and quickly click on the green button, instead of going to the shop, it slides.

• It does not occur on any other device than the MacBook Air.

• I've tested it extensively on Mac Pro and 3-4 Windows/Linux systems.

• I've tried changing the position property and moving the arrow controller here and there as well, but nothing worked.

I'm really confused about how this will be resolved.

P.S. - Ignore the irritating gradients that occur, thanks :)

import React from 'react'
import ShopComponent from './ShopComponent'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper'
import { IShop } from '@/types'

import ArrowController from '../common/ArrowsController'

interface IShopGroup {
    className?: string
    shops: IShop[]
}

const ShopGroup = ({ shops = [] }: IShopGroup) => {
    return (
        <div className="px-4">
            <div className="relative">
                <Swiper
                    className="h-full"
                    modules={[Navigation]}
                    slidesPerView={1.1}
                    navigation={{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        disabledClass: 'hidden',
                    }}
                    centerInsufficientSlides={true}
                    spaceBetween={20}
                    breakpoints={{
                        500: { slidesPerView: 1.8 },
                        650: { slidesPerView: 2.1 },
                        800: { slidesPerView: 3.5 },
                        1100: { slidesPerView: 4.5 },
                        1400: { slidesPerView: 4.5 },
                        1800: { slidesPerView: 6.5 },
                        2500: { slidesPerView: 7.5 },
                        2800: { slidesPerView: 8.5 },
                        3300: { slidesPerView: 9.5 },
                        3900: { slidesPerView: 10.5 },
                        4500: { slidesPerView: 12.5 },
                    }}
                >
                    {shops?.map((shopItem) => (
                        <SwiperSlide key={shopItem.id} className="md:!h-auto !h-[360px]">
                            <ShopComponent shop={shopItem} />
                        </SwiperSlide>
                    ))}
                </Swiper>
                <ArrowController
                    leftClass="swiper-button-prev"
                    rightClass="swiper-button-next"
                    classLeft="left-2 absolute"
                    classRight="right-2 absolute"
                />
            </div>
        </div>
    )
}

export default ShopGroup

/

I've also tried to look for answers in the official swiper docs and do some hit and trial, but nothing worked for me as of now.