오늘은 swiper 슬라이더 플러그인에 대해 공부해보겠습니다.
swiper 플러그인은 만들기도 쉽고 다양한 기능들을 응용해
여러 가지 유형의 슬라이드를 만들 수 있습니다.
ㅡ
swiper 홈페이지
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
ㅡ
먼저 swiper 간단한 사용법에 대해 알아보겠습니다.
swiper 사용 방법
먼저 swiper 연결을 할 때에는 css와 js를 연결을 해주어야 합니다.
* 참고로 swiper는 제이쿼리 js 파일이 필요 없습니다. 순수 ECMAScript6로 만들어졌기 때문입니다.
1. cdn 연결
css
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
js
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
2. 파일 다운로드 후 연결
깃허브 가셔서 css파일과 js파일을 다운로드해줍니다.
https://github.com/nolimits4web/swiper
<!DOCTYPE html>
<html lang="en">
<head> ...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body> ...
<script src="path/to/swiper.min.js"></script>
</body>
</html>
3. HTML Layout / JS 연결
html
Js 연결하기
var swiper = new Swiper('최상위 프레임 선택자')
--플러그인 호출 구문을 연결
4. swiper demo page
https://swiperjs.com/demos/
각종 기본 예제들의 데모 페이지입니다.
스와이퍼 슬라이드 만들 때 참고하시면 됩니다.
'웹 > JavaScript & JQuery' 카테고리의 다른 글
| [Js] 카카오맵 API 키 간단하게 발급받는 방법 (0) | 2020.07.12 |
|---|---|
| [Js] 트윈맥스(TweenMax.js) (0) | 2020.03.23 |
| [Js] Prototype 이해하기 (0) | 2020.03.19 |
| [js] 자바스크립트란? (0) | 2020.03.14 |
| [Js] pop(), shift(), ,push(), unshift(), splice() (0) | 2020.03.08 |
