Html,js,css 효과 플러그인 swiper
반응형 웹페이지를 만들기 위한 플러그인 사이트입니다.
해당 사이트를 통해 플러그인 소스를 다운받고 소스코딩을 하면 손쉽게 반응형 웹페이지를 구현하실 수 있습니다.
1. 데모페이지
Swiper Demos
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
플러그인 데모를 미리 보고 해당 소스를 다운 받거나 복사하여 사용할 수 있습니다.
2. swiper 다운받기
github.com/nolimits4web/swiper/releases?after=v6.0.0-alpha.2
Releases · nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
github.com
여기서 v5.3.8버전을 다운 받아 사용합니다.
3. 다운 받은 swiper를 압축을 풀어서
경로 swiper-5.3.8\swiper-5.3.8\package\js\swiper.min.js 와
경로 swiper-5.3.8\swiper-5.3.8\package\css\swiper.css를
복사하여 사용자 폴더에 붙여넣어 사용합니다.
4. 애니메이션으로 사용할 css 스타일 시트를 새롭게 만들어줍니다.
5. default.js 파일을 만들어주고 소스를 생성해줍니다.(효과를 주기 위해)
아래 소스는 swiper 페이드와 루프 효과를 주었습니다.
$(document).ready(function(){
var swiper = new Swiper('.swiper-container',{
effect:'fade',
loop:true
});
});
6. html문서에 css스타일 시트2개와 js 스크립트 소스 3개를 불러와 사용하면 반응형 웹페이지를 구현하실 수 있습니다.
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<link href="ani.css" rel="stylesheet">
<link href="swiper.css" rel="stylesheet">
<script src="jquery.js" charset="utf-8"></script>
<script src="swiper.min.js" charset="utf-8"></script>
<script src="default.js" charset="utf-8"></script>
</head>
'홈페이지 만들기' 카테고리의 다른 글
| 반응형으로 바꿀때 주의할 점들 height:100vh height:auto (0) | 2021.04.29 |
|---|---|
| include 외부 문서 불러오기 (0) | 2021.04.28 |
| css 스타일 시트 글자를 더 우아하게 만드는 방법 (0) | 2021.04.27 |
| 구글 폰트 사용방법 (0) | 2021.04.27 |
| material-design-icons 사용방법 (0) | 2021.04.27 |
