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.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> ...
Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리
JavaScript / JavaScript를 HTML 문서에 삽입하는 방법
HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...
객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;
JavaScript / 구문(Statement) 넣는 방법
자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...
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 / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드
.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...
JavaScript / Object / Location / URL 정보 가져오는 객체
location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...
JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드
.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...