My left and right navigation buttons get disabled when the slider container is narrow. How can I prevent this?

[davesag]

When the screen size is narrow the swiper-button-disabled class gets added to the left and right navigation components. I need to disable that behaviour. I read through the docs but can't see any way to control this. I'm using swiper/react with the Navigation module.

My BREAKPOINTS are simply controlling the number of slidesPerView and I can't see a way to control navigation visibility.

<Swiper
  modules={[Navigation]}
  breakpoints={BREAKPOINTS}
  slidesPerGroup={1}
  slidesPerView={1.5}
  spaceBetween={16}
  pagination={{ clickable: true }}
  navigation={{
    prevEl: '.swiper-button-prev-unique',
    nextEl: '.swiper-button-next-unique'
  }}
  onReachEnd={() => {
    if (hasNextPage && !isFetchingNextPage) fetchNextPage()
  }}
>
  {articles.map(article => (
    <SwiperSlide key={article.id} className="!h-auto">
        <Card {...article} />
    </SwiperSlide>
  ))}
  {isFetchingNextPage && (
    <>
      {[...Array(limit)].map((_, i) => (
        <SwiperSlide key={i} className="!h-auto">
          <Throbber />
        </SwiperSlide>
      ))}
    </>
  )}

  {!hasNextPage && (
    <SwiperSlide className="!h-auto">
      <Loader />
    </SwiperSlide>
  )}
</Swiper>

How can I ensure the navigation buttons still show regardless of the container width?