[swiper] CDN 설정

CDN 설정 방법

 

# 01:00

보안때문에 외부 연결을 못하는 경우, 플러그인을 다운받아서 사용하고, 보통은 CDN을 사용한다.

 

# 01:18

swiperjs.com/get-started#installation

Getting Started With Swiper

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

각각 2개의 CDN 중

• CSS는 일반 CSS를 사용한다. => 커스텀 마이징을 하기 위해서
• JS는 min 버전을 사용한다.

 

# 02:10

Swiper을 사용하기 위해서 제이쿼리를 사용해야 함.

code.jquery.com/

제일 상단에 있는 minified를 선택 

 

코드 복사

# 02:30

복사한 제이쿼리 CDN을 넣을 때 Swiper CDN의 윗쪽에 넣어줘야 하고,

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

제이쿼리 CDN의 필요없는 부분은 삭제한다.

* 삭제 -> integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"

 

최종 CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>