Swiper Custom pagination

// Install Swiper
$ npm install swiper

// Import JS Swiper
import Swiper from 'swiper';

// Import Style Swiper 
@import '~swiper/swiper.scss';

<!-- Slideshow container -->
<div class="yivic-banner swiper-container">
    <div class="yivic-banner__home">
        <div class="yivic-banner__home-sync1">
            <div class="swiper-wrapper">
                <div class="swiper-slide" data-name="Đặt trước GalaxyA6 <br />
                    nhận quà khủng" > 
                    <div class="item">
                        <a>
                            <img src="./assets/src/images/banner/1.webp">
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" data-name="Đặt trước XSMax <br />
                    nhận Sim Data"> 
                    <div class="item">
                        <a>
                            <img src="./assets/src/images/banner/2.webp">
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" data-name="Mua sạc dự phòng <br />
                    Nhận em nhân viên"> 
                    <div class="item">
                        <a>
                            <img src="./assets/src/images/banner/3.webp">
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" data-name="Mua dây sạc <br />
                    Tặng cục sạc"> 
                    <div class="item">
                        <a>
                            <img src="./assets/src/images/banner/4.webp">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="yivic-banner__home-sync2">
            <div class="container">
                <div class="banner_home_nav">
                    <div class="swiper-pagination yivic-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End slideshow container -->

// Custome js
import Swiper, { Autoplay, Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use( [Navigation, Pagination, Autoplay] );

const swiper = new Swiper( '.yivic-banner__home-sync1', {
    autoplay: {
        delay: 3000,
    },
    grabCursor: true,

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function ( index, className ) {
            const menus = [];
            const data = document.querySelectorAll( 'div[data-name]' );
            data.forEach(element => {
                menus.push( element.getAttribute( 'data-name' ) );
            });
            return '<div class="yivic-btnSlide ' + className + '"><a href="javacript:void(0)">' + ( menus[index] ) + '</a></div>';
        },
    },
} );

// SCSS Mobile
.yivic-banner {
  &__home {
    .banner_home_nav {
      .yivic-pagination {
        width: 100%;
        display: table;
        opacity: .8;
        background-color: #fff;
        z-index: 2;
        border-collapse: collapse;
      }
      .yivic-btnSlide {
        &.swiper-pagination-bullet-active {
          a {
            color: #fff;
          }
          background: hsla(283,3%,52%,.8);
          line-height: 16px;
        }
        a {
          color: #4a4a4a;
          max-height: 32px;
          overflow: hidden;
          display: block;
          text-decoration: none;
        }
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border-right: 1px solid #d8d8d8;
        height: 50px;
        font-size: 13px;
        line-height: 15px;
        color: #4a4a4a;
        padding: 10px;
      }
      margin-left: 250px;
    }
    &-sync2 {
      position: absolute;
      bottom: 0;
      z-index: 9;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: block;
    }
    position: relative;
  }
  .swiper-wrapper {
    .swiper-slide {
      .item {
        img {
          right: 0;
          width: 100%;
          height: 100%;
          bottom: 0;
          left: 0;
          top: 0;
          position: absolute;
          object-position: 50% 50%;
          object-fit: cover;
        }
        height: 410px;
        width: 100%;
        position: relative;
        overflow: hidden;
        background-position: 50% 50%;
        background-size: cover;
      }
    }
  }
}

// SCSS breakpoints lg 
.yivic-banner {
  &__home {
    .banner_home_nav {
    }
    &-sync2 {
      display: none;
    }
  }
  .swiper-wrapper {
    .swiper-slide {
      .item {
        img {
        }
      }
    }
  }
}