JavaScript / Plugin / Swiper / 슬라이더 플러그인
Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다.
- 홈페이지 : https://swiperjs.com/
- GitHub : https://github.com/nolimits4web/swiper
Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요.
기본 사용법
- 스크립트 파일과 CSS 파일을 연결합니다.
- 다음은 CDN을 이용하여 연결하는 코드입니다.
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
- 다음과 같은 형식으로 마크업합니다.
- 클래스 값인 swiper는 변경해도 됩니다.
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
- 위에서 정한 클래스 값을 선택자로 하여 슬라이더를 실행합니다.
- 이미지 전환이 자동으로 시작되고, 슬라이드 좌우에 화살표가 나옵니다.
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
} );
</script>
- 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Swiper</title>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
} );
</script>
</body>
</html>
옵션 사용법
- 사용할 수 있는 옵션은 https://swiperjs.com/swiper-api에 설명되어 있습니다.
- 예를 들어 슬라이더 전환을 자동으로 시작하고 싶다면 다음과 같이 옵션을 추가합니다.
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
} );
</script>
- 좀 더 상세한 설정을 하고 싶다면 중괄호 안에 상세 옵션을 추가합니다.
- 예를 들어 슬라이더 전환 자동 시작 시 하나의 슬라이더가 보여지는 시간을 정하고 싶다면 다음과 같이 설정합니다.
<script>
const swiper = new Swiper( '.swiper', {
autoplay: {
delay: 1000,
},
} );
</script>
Pagination 추가하기
- 페이지네이션을 추가하고 싶다면 <div class="swiper-pagination"></div>를 추가합니다.
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
- pagination 옵션을 추가합니다.
- el : 페이지네이션을 추가할 요소의 클래스 값
types : 페이지네이션의 모양
clickable : 클릭했을 때 이동 가능하게
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
} );
</script>
- 슬라이더 아래에 동그라미 형태의 페이지네이션이 추가되고, 클릭하면 해당 슬라이더로 이동합니다.
여러 슬라이드 동시에 보이기
- 여러 슬라이드가 동시에 보이게 하고 싶다면 slidesPerView 옵션을 추가합니다. 값은 한 화면에 나오는 슬라이드 수입니다.
- slidesPerGroup은 슬라이드 전환 시 넘어가는 슬라이드 수입니다.
- 다음은 3개의 슬라이드가 보이고, 하나씩 전환하는 예입니다.
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 3,
slidesPerGroup : 1,
} );
</script>
- 이때 슬라이드의 높이를 유지한 채 좌우를 자르게 되는데, 전체 이미지가 다 나오게 하고 싶다면 스타일을 추가합니다.
<style>
.swiper-slide img {
max-width: 100%;
}
</style>
해상도에 따라 옵션 변경하기
- breakpoints를 이용하여 해상도에 따라 다른 옵션을 지정할 수 있습니다.
- 아래는 768px 미만에서는 슬라이더가 2개, 768px 이상에서는 슬라이더가 3개, 1024px 이상에서는 슬라이더가 4개 나오게 하는 예제입니다.
<script>
const swiper = new Swiper( '.swiper', {
autoplay: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 2,
slidesPerGroup : 1,
breakpoints: {
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
}
}
} );
</script>
JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드
.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.
JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법
사업자등록번호 유효성 검사 사업자등록번호를 입력하고 전송할 폼을 만들고, 버튼 클릭 시 checkBrn() 함수를 호출한다. <input type="text" name="brn" id="brn"> <input type="button" value="Check" onclick="checkBrn();"> 메시지를 출력할 공간을 만든다. <p id="checkBrnMessage"></p> 입력한 값을 변수 brn에 담는다. var brn = document.getElementById( "brn" ).value; 정규표현식 /^{5}$/를 이용하여 유효성 검사를 한다. 000-00-00000 형식이 맞으면 OK, 그렇지 않으면 NOT OK를 출력한다. if ( /^{5}$/.test( brn ) ) ...
JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성
.splice() .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다. 문법 array.splice( start, count ) 예를 들어 jbAry.splice( 1, 2 )는 jbAry 배열의 두번째 값부터 2개를 추출합니다. array.splice( start, count, value1, value2, ... ) 예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry 배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 ...
JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드
.getElementsByTagName() .getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다. 문법 1 document.getElementsByTagName( 'tagname' ) 예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다. document.getElementsByTagName( 'p' ) 예제 1 문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...
JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수
isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성
.childElementCount .childElementCount는 자식 요소의 개수를 반환하는 속성입니다. 바로 아래 단계에 있는 자식 요소의 개수만 세고, 자식 요소의 자식 요소의 수는 세지 않습니다. IE는 버전 9 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum <span>Dolor</span></li> </ul> <script> var jb = document.getElementsByTagName( ...
JavaScript / Object / .innerText, .innerHTML
.innerText .innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다. 문법 1 - 내용 가져오기 element의 내용을 가져온다. element.innerText id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다. var jb = document.getElementById( 'xyz' ).innerText; 예제 1 id의 값이 jb인 요소의 텍스트를 가져와서 출력한다. 태그 등은 제외한 텍스트만 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리
JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성
.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체
JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)
전역변수와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...