Let me explain better, when we are pressing next or prev, it always reach to one button that be grayed out, meaning we can’t move anymore forward when it is next button, or backwards when it is prev button, but there is one problem, when I reached to this grayed out button, if I click on it, it actually clicks on the content of slide, leading to the respective route of that slide.

I want to prevent this behavior, I don’t want in any way that the user could click on content by clicking on the buttons even if they are grayed out, how can I prevent this from happening, is there any option?

This is my current component:

<swiper-container
        className='collection-wrapper'
        slides-per-view='auto'
        navigation={true}
        space-between={25}
        grab-cursor={true}
       
      >
        {collectionState?.map(({ id, name, description, image }) => {
          return (
            <swiper-slide
              key={id}
              className='collection-wrapper-list'
            >
              <NavLink to='/new'>
                <div className='background-fill'></div>
                <div className='collection-wrapper-text'>
                  <StyledHeadings as='h3' className='collection-text'>
                    {name}
                  </StyledHeadings>
                  <StyledParagraphs $size='p1' className='collection-text'>
                    {description}
                  </StyledParagraphs>
                </div>
                <div className='collection-wrapper-image'>
                  <img className='collection-image' src={image} />
                </div>
              </NavLink>
            </swiper-slide>
          );
        })}
      </swiper-container>

Don’t mind the NavLink there, it is just for testing purposes.

As you can see I am using swiper elements as it was recommended by Swiper itself for using along with React from now on as Swiper for React will be disabled.