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 / document.write()
.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()
JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수
Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...
JavaScript / Object / String.length / 문자열의 길이 반환하는 속성
.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!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>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...
JavaScript / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드
.fromCharCode() .fromCharCode()는 유니코드를 문자로 바꾸는 메서드입니다. 문법 string.charCodeAt( index ) 예제 1 'HELLO'.charCodeAt( 0 ) H의 유니코드 72를 반환합니다. 예제 2 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = 'HELLO'; for ( i = 0; i < jb.length; i++ ) { document.write ( jb.charCodeAt( i ...
JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드
.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드
.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...
JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드
.getAttribute() .getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다. 문법 element.getAttribute( 'attributename' ) 예를 들어 var jb = document.getElementById( 'xyz' ).getAttribute( 'title' ); 는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다. 예제 id의 값이 abc인 a 요소의 href 속성의 값을 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)
전역변수와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트
JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...