티스토리 뷰

웹 퍼블리싱/퍼블 플러그인 정리

swiper.js

사용자 용고리 2019. 6. 24. 09:04

swiper

 

swiper.js플러그인입니다.

 

모바일 메뉴 터치 슬라이더를 만들 때 유용합니다.

 

 

 

 

 

swiper 홈페이지

 

http://idangero.us/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>

 

 

 


개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.

'웹 퍼블리싱 > 퍼블 플러그인 정리' 카테고리의 다른 글

swiper.js  (0) 2019.06.24
masonry.js  (0) 2019.05.27
validation.js 실시간 폼 유효성 검사  (0) 2019.05.24
TAG
댓글
댓글쓰기 폼