6 스와이퍼 Swiper

<!-- 1. 메인 컨테이너 -->
<div class="swiper">
  <!-- 2. 슬라이드 래퍼 -->
  <div class="swiper-wrapper">
    <!-- 3. 개별 슬라이드 -->
    <div class="swiper-slide">슬라이드 1</div>
    <div class="swiper-slide">슬라이드 2</div>
    <div class="swiper-slide">슬라이드 3</div>
  </div>

  <!-- 페이지네이션 (선택) -->
  <div class="swiper-pagination"></div>

  <!-- 이전/다음 버튼 (선택) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

• reset.css 와 스와이퍼를 설치한다

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>

• section 태그 자식요소로 div 를 만들고 자식요소로 스와이퍼 요소를 추가한다. 스와이퍼에서 제공하는 클래스이름은 변경하지 않고 그대로 사용한다. 스와이퍼의 부모요소인 section과 div 는 필요에 따라 변경해서 사용하면된다.

    <section class="notice">
    <div class="promotion">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"></div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-prev"></div>
      <div class="swiper-next"></div>
    </div>
  </section>

• section 태그 자식요소로 div 를 만들고 자식요소로 스와이퍼 요소를 추가한다. 스와이퍼에서 제공하는 클래스이름은 변경하지 않고 그대로 사용한다. 스와이퍼의 부모요소인 section과 div 는 필요에 따라 변경해서 사용하면된다.

  <section class="notice">
    <div class="promotion">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"></div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-prev"></div>
      <div class="swiper-next"></div>
    </div>
  </section>

• 슬라이드에 추가할 이미지를img 태그를 이용해 swiper-slide 자식 요소로 입력한다.

    <div class="swiper-slide">
      <img src="./imgs/1.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/2.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/3.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/4.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/5.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/6.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/7.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./imgs/8.jpg" alt="" />
    </div>

• 구글 머티리얼 아이콘을 이용해 좌/우 화살표를 입력한다.

    <div class="swiper-prev">
      <span class="material-symbols-outlined"> chevron_left </span>
    </div>
    <div class="swiper-next">
      <span class="material-symbols-outlined"> chevron_right </span>
    </div>

• 슬라이드를 3장씩 보여주고 선택된 이미지는 중앙에 선명하게 보여 주고 양쪽에 이미지는 투명도를 0.4정도를 줘서 반투명하게 보여주 도록 한다. 세장의 이미지를 보여주기 위해 “swiper-container”의 폭을 3배 로 지정하고 간격을 20픽셀 더한 2,480픽셀로 지정한다.

    .notice .promotion .swiper-container {
    width: calc(420px * 3 + 20px);
    height: 540px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
  }

• 슬라이드에서 가운데 보여지는 이미지의 투명도를 1로 하고 양쪽에 이미지는 투명도를 0.4로 지정한다. 페이지네이션 블릿은 이미지(”./imgs/promotion_slide_pager.png”)를 백그라운로 지정한다. 그후 액티브 상태의 이미지 (”./imgs/promotion_slide_pager_on.png”)를 교체하도록 설정한다.

    .notice .promotion .swiper-slide {
    opacity: 0.4;
    transition: opacity 1s;
    position: relative;
    text-align: center;
  }
  .notice .promotion .swiper-slide img {
    width: 100%;
    height: 100%; /* 비율깨짐 */
    object-fit: fill;
    object-fit: contain;
    object-fit: scale-down;
    object-fit: cover; /* 가로기준으로 비율에 맞게 채움 */
  }
  .notice .promotion .swiper-slide-active {
    opacity: 1;
  }
  .notice .promotion .swiper-pagination {
    bottom: 40px;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 9999;
  }
  .notice .promotion .swiper-pagination .swiper-pagination-bullet {
    background-color: transparent;
    background: url('./imgs/promotion_slide_pager.png') no-repeat center center/100%;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    outline: none;
  }
  .notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0;
  }
  .notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
    background: url('./imgs/promotion_slide_pager_on.png') no-repeat center center/100%;
  }

• 좌우로 이동하는 화살표에 호버를 설정한다.

    .notice .promotion .swiper-prev,
    .notice .promotion .swiper-next {
      width: 42px;
      height: 42px;
      border: 2px solid rgb(255, 255, 255);
      border-radius: 50%;
      color: white;
      position: absolute;
      top: 300px;
      z-index: 1;
      cursor: pointer;
      outline: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.4s;
      user-select: none;
    }
    .notice .promotion .swiper-prev {
      left: 50%;
      margin-left: -480px;
    }
    .notice .promotion .swiper-next {
      right: 50%;
      margin-right: -480px;
    }
    .notice .promotion .swiper-prev:hover,
    .notice .promotion swiper-next:hover {
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
    }

  <div class="swiper video-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <video controls loop muted autoplay>
          <source src="imgs/1.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="swiper-slide">
        <video controls loop muted autoplay>
          <source src="imgs/2.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="swiper-slide">
        <video controls loop muted autoplay>
          <source src="imgs/3.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>