슬라이드창 구현하기

Swiper

swiperjs.com

: 자바스크립트 라이브러리

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

: 사용하기 위해 링크를 걸어준다.

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

: 예제 처럼 클래스를 설정하여 사용할 수 있다.

클래스 설정 후에는

js로 동작을 넣어주어야 한다.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

여러가지 옵션이 있고 쉽게 사용할 수 있다.

calc()

calc(819px * 3 + 20px);

: css 에서 계산이 필요한 입력을 편하게 할 수 있다.

화면이 줄거나 커져도 중앙에 오게 하기

position: absolute;
left: 50%;
margin-left: calc(요소 가로 크기 px/-2);

swiper 옵션 사용하기

new Swiper('.promotion .swiper-container', {
  // direction: 'horizontal', // 수평 슬라이드
  autoplay: { // 자동 재생 여부
    delay: 5000 // 5초마다 슬라이드 바뀜
  },
  loop: true, // 반복 재생 여부
  slidesPerView: 3, // 한 번에 보여줄 슬라이드 개수
  spaceBetween: 10, // 슬라이드 사이 여백
  centeredSlides: true, // 1번 슬라이드가 가운데 보이기
  pagination: { // 페이지 번호 사용 여부
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true // 사용자의 페이지 번호 요소 제어 가능 여부
  },
  navigation: { // 슬라이드 이전/다음 버튼 사용 여부
    prevEl: '.promotion .swiper-prev', // 이전 버튼 선택자
    nextEl: '.promotion .swiper-next' // 다음 버튼 선택자
  }
})

autoplay: { delay: 5000 } => 객체로 넣어서 설정하기

loop: true => 처음과 끝부분이 비어있지 않고 반복하여 재생하도록 함

centeredSlides: true => 1번 슬라이드가 가운데 보이고 가운데 슬라이드에 -active 클래스 부여

pagination: { el: '.promotion .swiper-pagination', clickable: true }

: 클래스를 만들어두고 설정해주면 역할을 하게 된다.

css 설정

swiper-slide 에 opacity .2 부여하고

swiper-slide-active 에 opacity 1 로 부여하여 active 되면 선명하게 보이게 한다.

pagination은 이미 설정된 css 값이 존재한다. absolute로 되어있으므로 위치를 조정하고

선택했을때 outline 이 보이지 않도록

outline: none;

을 해준다.

이후 필요한 pagination, prev, next의 모양을 설정해준다.

flex 정리

display: flex;