19일차 - 스와이퍼 플러그인

스와이퍼 https://swiperjs.com/get-started

1. 플러그인 링크 붙여넣기

https://swiperjs.com/get-started

HTML 복붙 https://swiperjs.com/swiper-api

<div class="swiper">

  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <div class="swiper-pagination"></div>
</div>

CSS cdn 복붙 - Use Swiper from CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

자바스크립트 복붙 - Initialize Swiper

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

2. 자바스크립트 for 스와이프

2-1. Demos -> autoplay -> core

완성

---

3. 스와이프를 2개 굴려보자 - id 삽입!

Q. 스와이프가 페이지마다 10개씩 있어. 어떡할래?
A. id로 구분! (우선순위 높여 스타일을 바꾸기 위해) -> id끼고 들어가서 작업하자!

HTML

자바스크립트

CSS 페이지네이션 버튼 색을 바꿔보자!

---

4. 이게 '페이지네이션 버튼'

+) 이미지 겹침 문제 → 반응형 처리 위해

img{ width: 100%; }

---

4-1. CSS로 원형 버튼 만들기

---

4-2. CSS로 ㅡ자 버튼 만들기

순서 바뀌면 안됨!