How to Customize Swiper.js in React for Specific Features or Styles?

Question

I am using Swiper.js in React for the first time and am having trouble customizing it to meet my needs. I followed the official documentation, installed the library, and added the requirenter link description hereed components to my project. While my website isn't breaking, the slider is not functioning as I want it to.

I’ve attached pictures showing what I am trying to achieve versus what I currently have.

Any help on customizing my Swiper to achieve the desired look and functionality would be greatly appreciated! Specifically, I’d like guidance on how to customize the pagination buttons according to my design requirements.

        {/* this is the prodcuts I am to display */}


useEffect(() => {
    setDisplayData(
      data.map((product) => (
        <SwiperSlide key={product.id}>
          <div className="feature-item-card-container limited-item-card-container">
            <div className="feature-item-img-container limited-item-img-container">
              <img
                className="feature-img-one"
                src={product.images.firstImage}
                alt=""
              />
              <img
                className="feature-img-two"
                src={product.images.secondImage}
                alt=""
              />
              <div className="feature-item-btn-container">
                <p>Add to cart</p>
              </div>
            </div>

            <div className="feature-item-details-container">
              <div className="feature-details-wishlist-container">
                <p>{product.category}</p>
                <i class="ri-heart-line"></i>
              </div>

              <div className="feature-details-price-container">
                <p>{product.title}</p>
                <p>$ {product.price}</p>
              </div>

              <div className="feature-details-review-container">
                <div className="feature-stars-container">
                  <i class="ri-star-s-fill"></i>
                  <i class="ri-star-s-fill"></i>
                  <i class="ri-star-s-fill"></i>
                  <i class="ri-star-s-fill"></i>
                  <i class="ri-star-s-fill"></i>
                </div>
                {product.reviewCount ? (
                  <p>{product.reviewCount} reviews</p>
                ) : (
                  ""
                )}
              </div>
            </div>
          </div>
        </SwiperSlide>
      ))
    );
  }, []); 

       {/* this is the section I am to display */}


       <div className="limited-edition-products-container">
         <Swiper
           slidesPerView={3}
           spaceBetween={30}
           autoplay={{
             delay: 3000,
             disableOnInteraction: false,
           }}
           pagination={{
             clickable: true,
           }}
           modules={[Pagination, Autoplay]}
           className="mySwiper"
         >
           {displayData}
         </Swiper>
       </div> 

.limited-edition-products-container {
    background-color: brown;
    width: 100%;
    display: flex;
    overflow: hidden;
    height: auto;

}




.swiper {
    width: 100%;
    height: 100%;
    background-color: blueviolet;
  }
  
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: pink;
  
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }