<div class="swiper-container mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1606787947360-4181fe0ab58c?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="슬라이드 이미지" />
      <div class="text-box">
        <h1>Slide 01</h1>
        <a href="javascript:;">첫번째 슬라이드</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1625434132728-97518a6a3c86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80" alt="슬라이드 이미지" />
      <div class="text-box">
        <h1>Slide 02</h1>
        <a href="javascript:;">두번째 슬라이드</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1622495966349-2857f74777a0?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="슬라이드 이미지" />
      <div class="text-box">
        <h1>Slide 03</h1>
        <a href="javascript:;">세번째 슬라이드</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1625406704849-0f49b43b8251?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="슬라이드 이미지" />
      <div class="text-box">
        <h1>Slide 04</h1>
        <a href="javascript:;">네번째 슬라이드</a>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

a {
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
}
.swiper-container {
  display:flex;
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.swiper-container::after,
.swiper-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 33.33%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
.swiper-container::after {
  left: auto;
  right: 0;
}
.swiper-wrapper {
  display: flex;
  position: relative;
  z-index: 0;
}
.swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-wrapper .swiper-slide {
  position: relative;
}
.swiper-wrapper .swiper-slide .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.swiper-wrapper .swiper-slide .text-box h1 {
  font-size: 50px;
  color: #fff;
  text-align: center;
}
.swiper-wrapper .swiper-slide .text-box a {
  display: block;
  margin-top: 10px;
  padding: 15px 30px;
  font-size: 1vw;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 10vw;
}
/* (1) */
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px;
}
.swiper-pagination-bullet {
  width: 50px;
  height: 4px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
/* (2) */
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 0;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 0;
}
.swiper-button-next,
.swiper-button-prev {
  top: 0;
  margin-top: 0;
  width: 33.33%;
  height: 100%;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: '';
}
@media screen and (max-width: 768px) {
  .swiper-container::after,
  .swiper-container::before {
    display: none;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

var swiper = new Swiper(".mySwiper", {
  // 768 이하에서 출력될 설정값
  slidesPerView: 1, // 한 슬라이드만 출력
  loop: true, // 무한 루프
  pagination: {
      el: ".swiper-pagination",
      clickable: true, // 페이지네이션 버튼 클릭시 스와이프 작동
  },
  breakpoints: {
    // 768 이상에서 출력될 설정값
    768: {
        slidesPerView: 3, // 한 화면에 세개의 슬라이드 출력
        centeredSlides: true, // 첫번째 슬라이드가 가운데에 오도록 설정
        loop: true, // 무한 루프
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    },
  },
});