728x90
Html,js,css 효과 플러그인 swiper
반응형 웹페이지를 만들기 위한 플러그인 사이트입니다.
해당 사이트를 통해 플러그인 소스를 다운받고 소스코딩을 하면 손쉽게 반응형 웹페이지를 구현하실 수 있습니다.
1. 데모페이지
플러그인 데모를 미리 보고 해당 소스를 다운 받거나 복사하여 사용할 수 있습니다.
2. swiper 다운받기
github.com/nolimits4web/swiper/releases?after=v6.0.0-alpha.2
여기서 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>
728x90
'홈페이지 만들기' 카테고리의 다른 글
반응형으로 바꿀때 주의할 점들 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 |