swiper
swiper.js플러그인입니다.
모바일 메뉴 터치 슬라이더를 만들 때 유용합니다.
swiper 홈페이지
Swiper - Most Modern Mobile Touch Slider
Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but al
idangero.us
간단한 사용법
사용 시 swiper.css 파일과 swiper.js 파일을 먼저 불러와야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/swiper.css">
<style>
.swiper-slide { text-align:center; }
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">메뉴1</div>
<div class="swiper-slide">메뉴2</div>
<div class="swiper-slide">메뉴3</div>
<div class="swiper-slide">메뉴4</div>
<div class="swiper-slide">메뉴5</div>
<div class="swiper-slide">메뉴6</div>
</div>
</div>
<script src="js/swiper.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1, //한번에 보여지는 슬라이드 개수
spaceBetween: 10, //마진값
initialSlide: 1, //시작위치값
roundLengths: true, //일반 해상도 화면에서 텍스트가 흐려지는 것을 방지하기 위해 슬라이드 너비와 높이 값을 반올림
//반응형
breakpointsInverse: true,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 10
}
}
});
</script>
</body>
</html>
개인 공부용으로 만들었습니다.
다른 분들에게도 도움이 되었으면 좋겠습니다.
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
'웹퍼블 > 웹퍼블(플러그인정리)' 카테고리의 다른 글
| 에디터 비주얼 스튜디오 코드(VSCode) (0) | 2020.04.16 |
|---|---|
| masonry.js (0) | 2019.05.27 |
| validation.js 실시간 폼 유효성 검사 (1) | 2019.05.24 |
