JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<div class="col-12 mx-auto categories-section-container">
              <div class="swiper-container categories-slider" dir="rtl">
                <div class="swiper-wrapper">
                  <a class="category-container-single swiper-slide" href="#">
                    <img src="https://picsum.photos/id/237/200/300" alt="آرایش لب" class="img-fluid d-block mx-auto">
                    <p>Slide</p>
                  </a>
                  <a class="category-container-single swiper-slide" href="#">
                    <img src="https://picsum.photos/id/237/200/300" alt="آرایش لب" class="img-fluid d-block mx-auto">
                    <p>Slide</p>
                  </a>
                  <a class="category-container-single swiper-slide" href="#">
                    <img src="https://picsum.photos/id/237/200/300" alt="آرایش لب" class="img-fluid d-block mx-auto">
                    <p>Slide</p>
                  </a>
                  <a class="category-container-single swiper-slide" href="#">
                    <img src="https://picsum.photos/id/237/200/300" alt="آرایش لب" class="img-fluid d-block mx-auto">
                    <p>Slide</p>
                  </a>
                </div>
              </div>
              <div class="categories-navitation swiper-navitation">
                <div class="categories-button-next swiper-button-next"></div>
                <div class="categories-button-prev swiper-button-prev"></div>
              </div>
            </div>
            
            <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

SCSS

.categories-section-container {
  overflow: hidden;

    .categories-slider {
      overflow: visible;
      width: 90%;
      .category-container-single {
        border-radius: 15px;
        transition: .3s;
        img {
          border-radius: 15px;
        }
        p {
          margin-top: 1rem;
          text-align: center;
          font-weight: 900;
          font-size: 1.1rem;
          font-family: Arial;
          color: black;
        }
      }
      @media screen and (max-width: 972px) {
        .category-container-single {
          img {
            filter: brightness(50%);
            transition: filter .5s;
          }
        }
        .category-container-single.swiper-slide-active, .category-container-single.swiper-slide-next {
          img {
            filter: brightness(100%);
          }
        }
      }
      
    }
    .categories-navitation {
      > div {
        visibility: visible;
        opacity: 1;
        transition: .3s;
      }
      > div.swiper-button-disabled {
        visibility: hidden;
        opacity: 0;
      }
    }
  }

JavaScript

var categoriesSlider = new Swiper('.categories-slider', {
    navigation: {
      nextEl: '.categories-button-prev',
      prevEl: '.categories-button-next'
    },
    slidesPerView: 4,
    spaceBetween: 45,
    grabCursor: true,
    speed: 700,
    breakpoints: {
      0: {
        slidesPerView: 2,
        spaceBetween: 15
      },
      972: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 45
      }
    }
  });