Powered by

# 20.swiper

In 
ui, 

# 목차

  • 1. swiper
  • 2. 설치
    • 2.1. cdn
    • 2.2. npm
  • 3. 실행
  • 4. 주요욥션
  • 5. 주요메서드
    • 5.1. 페이지네이션 종류
  • 6. 예제
    • 6.1. 이미지갤러리
      • 6.1.1. STEP1
      • 6.1.2. STEP2
      • 6.1.3. STEP3
    • 6.2. Horizontal layout

# 1. swiper

swiper
https://swiperjs.com/

GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 J-Query 보다 20배 이상 빠른 성능을 갖고 있다고 소개하고 있다. gsap.to() 메소드를 이용해 자연스러운 움직임을 만들 수 있다

# 2. 설치

# 2.1. cdn 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

# 2.2. npm 

npm install swiper

# 3. 실행

swiper 라이브러리를 적용하려면 html 구조를 아래와 같이 작성해야 한다. 슬라이드는 두단계로 래핑해야 한다. 컨트롤 요소는 슬라이드를 감싼 부모와 형제요소로 마크업 한다.

미리보기
https://qwerewqwerew.github.io/source/js/deep/swiper/1.html 

<!-- Slider main container -->
<div class="swiper">
	<!-- Additional required wrapper -->
	<div class="swiper-wrapper">
		<!-- Slides -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		...
	</div>
	<!-- If we need pagination -->
	<div class="swiper-pagination"></div>

	<!-- If we need navigation buttons -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>

	<!-- If we need scrollbar -->
	<div class="swiper-scrollbar"></div>
</div>
.swiper {
	width: 600px;
	height: 300px;
}
const swiper = new Swiper('.swiper', {
	// 스와이퍼 방향 및 반복 여부
	direction: 'vertical',
	loop: true,
	// 페이지네이션 설정
	pagination: {
		el: '.swiper-pagination',
	},
	// 네비게이션 화살표 설정
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	// 스크롤바 설정
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});

# 4. 주요욥션

옵션 설명
initialSlide 초기 활성 슬라이드의 인덱스를 설정합니다. 기본값은 0입니다.
speed 전환 속도(밀리초)를 설정합니다. 기본값은 300입니다.
spaceBetween 슬라이드 사이의 간격(픽셀)을 설정합니다. 기본값은 0입니다.
slidesPerView 한 번에 보여질 슬라이드 수를 설정합니다. 'auto'로 설정하면 슬라이드의 너비에 따라 자동으로 결정됩니다.
centeredSlides 활성 슬라이드가 항상 중앙에 오도록 할지 여부를 결정합니다. 기본값은 false입니다.
loop 무한 롤링을 할지 여부를 결정합니다 (첫 번째 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드로, 마지막 슬라이드에서 다음 버튼을 누르면 첫 번째 슬라이드로). 기본값은 false입니다.
autoplay 자동 재생 관련 설정을 합니다. { delay: 2500 }와 같이 객체를 전달하면 2.5초 간격으로 자동 재생됩니다. disableOnInteraction: false를 추가하면 사용자의 스와이프 후에도 자동 재생이 계속됩니다.
navigation 이전/다음 버튼 사용 설정을 합니다. {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}와 같이 객체를 전달하면 지정된 엘리먼트가 네비게이션 버튼으로 작동합니다.
pagination 페이지네이션 설정을 합니다. {el: '.swiper-pagination', clickable: true}와 같은 형태로 객체를 전달하면 지정된 엘리먼트가 페이지네이션 역할을 하며, 클릭 가능합니다.
scrollbar 스크롤바 설정을 합니다.{el: '.swiper-scrollbar', draggable: true} 와 같은 형태로 객체를 전달하면 지정된 엘리먼트가 드래그 가능한 스크롤바로 작동합니다.
effect 'slide', 'fade', 'cube', 'coverflow' 또는 'flip' 중 하나의 효과를 선택할 수 있습니다.'slide'가 기본값입니다.
breakpoints 화면 크기에 따라 서로 다른 설정을 적용하기 위한 옵션입니다. 객체 형태로 전달하며, 각 속성의 이름은 화면의 최소 너비(px)이고 값은 해당 너비에서 적용될 설정들의 객체입니다.

# 5. 주요메서드

메서드 설명
swiper.slideNext() 다음 슬라이드로 이동합니다.
swiper.slidePrev() 이전 슬라이드로 이동합니다.
swiper.slideTo(index) 지정한 인덱스의 슬라이드로 이동합니다. 인덱스는 0부터 시작합니다.
swiper.update() Swiper를 강제로 업데이트합니다. 일반적으로 크기 변경, 슬라이드 추가/삭제 등 후에 사용됩니다.
swiper.destroy(deleteInstance, cleanupStyles) Swiper 인스턴스를 제거하고 필요에 따라 초기화할 때 추가된 모든 스타일을 제거할 수 있습니다. 첫 번째 매개변수가 true면 Swiper 인스턴스를 삭제하고 두 번째 매개변수가 true면 초기화시 추가된 모든 스타일을 제거합니다.

# 5.1. 페이지네이션 종류

# 6. 예제

# 6.1. 이미지갤러리

swiper를 이용해 이미지갤러리를 제작한다. 가로 820픽셀 이미지 8 장을 준비하고 Swiper를 이용해서 3개의 이미지가 보여지며 페이지 이동과 이전, 다음 버튼을 이용해 이미지를 변경할 수 있도록 제작

미리보기
https://qwerewqwerew.github.io/source/js/deep/swiper/2.html

# 6.1.1. STEP1

reset.css 와 스와이퍼를 설치한다

#CDN
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>

section 태그 자식요소로 div 를 만들고 자식요소로 스와이퍼 요소를 추가한다. 스와이퍼에서 제공하는 클래스이름은 변경하지 않고 그대로 사용한다. 스와이퍼의 부모요소인 section과 div 는 필요에 따라 변경해서 사용하면된다.

<section class="notice">
	<div class="promotion">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"></div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-prev"></div>
		<div class="swiper-next"></div>
	</div>
</section>

슬라이드에 추가할 이미지를img 태그를 이용해 swiper-slide 자식 요소로 입력한다.

<div class="swiper-slide">
	<img src="./imgs/1.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/2.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/3.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/4.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/5.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/6.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/7.jpg" alt="" />
</div>
<div class="swiper-slide">
	<img src="./imgs/8.jpg" alt="" />
</div>

구글 머티리얼 아이콘을 이용해 좌/우 화살표를 입력한다.

<div class="swiper-prev">
	<span class="material-symbols-outlined"> chevron_left </span>
</div>
<div class="swiper-next">
	<span class="material-symbols-outlined"> chevron_right </span>
</div>

"body" 배경색을 파일 1개를 지정하고 글꼴을 지정한다. 스와이퍼를 감싸는"promotion"에도 배경색과 높이를 설정한다.

body {
	background-color: rgb(228, 247, 255);
	color: darkblue;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	font-family: 'Nanum Gothic', sans-serif;
}
.notice .promotion {
	height: 740px;
	background-color: #3e85a3;
	position: relative;
	overflow-x: hidden;
}
 
'use strict';
new Swiper('.promotion .swiper-container', {
	slidesPerView: 3, //한번에 보여줄 슬라이드 개수
	spaceBetween: 20,
	centeredSlides: true,
	loop: true,
	autoplay: {
		delay: 5000,
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true, //사용자의 페이지 번호 요소 제어 가능 여부
	},
	navigation: {
		prevEl: '.promotion .swiper-prev',
		nextEl: '.promotion .swiper-next',
	},
});

# 6.1.2. STEP2

이미지 위치조정

슬라이드를 3장씩 보여주고 선택된 이미지는 중앙에 선명하게 보여 주고 양쪽에 이미지는 투명도를 0.4정도를 줘서 반투명하게 보여주 도록 한다. 세장의 이미지를 보여주기 위해 "swiper-container"의 폭을 3배 로 지정하고 간격을 20픽셀 더한 2,480픽셀로 지정한다.

.notice .promotion .swiper-container {
	width: calc(420px * 3 + 20px);
	height: 540px;
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

# 6.1.3. STEP3

투명도 조정 및 버튼 배치

슬라이드에서 가운데 보여지는 이미지의 투명도를 1로 하고 양쪽에 이미지는 투명도를 0.4로 지정한다. 페이지네이션 블릿은 이미지("./imgs/promotion_slide_pager.png")를 백그라운로 지정한다. 그후 액티브 상태의 이미지 ("./imgs/promotion_slide_pager_on.png")를 교체하도록 설정한다.

.notice .promotion .swiper-slide {
	opacity: 0.4;
	transition: opacity 1s;
	position: relative;
	text-align: center;
}
.notice .promotion .swiper-slide img {
	width: 100%;
	height: 100%; /* 비율깨짐 */
	object-fit: fill;
	object-fit: contain;
	object-fit: scale-down;
	object-fit: cover; /* 가로기준으로 비율에 맞게 채움 */
}
.notice .promotion .swiper-slide-active {
	opacity: 1;
}
.notice .promotion .swiper-pagination {
	bottom: 40px;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 9999;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet {
	background-color: transparent;
	background: url('./imgs/promotion_slide_pager.png') no-repeat center center/100%;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	outline: none;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
	margin-right: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
	background: url('./imgs/promotion_slide_pager_on.png') no-repeat center center/100%;
}

좌우로 이동하는 화살표에 호버를 설정한다.

.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
	width: 42px;
	height: 42px;
	border: 2px solid rgb(255, 255, 255);
	border-radius: 50%;
	color: white;
	position: absolute;
	top: 300px;
	z-index: 1;
	cursor: pointer;
	outline: none;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.4s;
	user-select: none;
}
.notice .promotion .swiper-prev {
	left: 50%;
	margin-left: -480px;
}
.notice .promotion .swiper-next {
	right: 50%;
	margin-right: -480px;
}
.notice .promotion .swiper-prev:hover,
.notice .promotion swiper-next:hover {
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}

# 6.2. Horizontal layout

미리보기
https://qwerewqwerew.github.io/source/ui/swiper/swiper-horizontal.html

  1. 구조작성
<!--  .swiper.vertical>swiper-wrapper>(a.swiper-slide)*3+section.swiper.section_All.swiper+a.swiper-slide -->
<div class="swiper vertical">
		<div class="swiper-wrapper">
				<div class="a swiper-slide">
						1
				</div>
				<div class="a swiper-slide">
						2
				</div>
				<div class="a swiper-slide">
						3
				</div>
				<section class="swiper section_All swiper-slide">
						<div class="swiper-wrapper">
								<div class="swiper-slide" data-hash="slide1">Slide 1</div>
								<div class="swiper-slide" data-hash="slide2">Slide 2</div>
								<div class="swiper-slide" data-hash="slide3">Slide 3</div>
								<div class="swiper-slide" data-hash="slide1">Slide 4</div>
								<div class="swiper-slide" data-hash="slide1">Slide 5</div>
								<div class="swiper-slide" data-hash="slide1">Slide 6</div>
								<div class="swiper-slide" data-hash="slide1">Slide 7</div>
								<div class="swiper-slide" data-hash="slide1">Slide 8</div>
								<div class="swiper-slide" data-hash="slide1">Slide 9</div>
						</div>
						<div class="swiper-pagination"></div>
				</section>
				<div class="a swiper-slide">
						5
				</div>
		</div>
</div>
  1. 라이브러리 로드
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js" defer></script>
  1. css 작성
html,
body {
		position: relative;
		height: 100%;
}

body {
		background: #eee;
		font-size: 14px;
		color: #000;
		margin: 0;
		padding: 0;
}

.vertical {
		/*  background: #000; */
}

.a {
		width: 100%;
		height: 100vh;
		background: #ccc;
}

.swiper {
		width: 100%;
		height: 100%;
}

.swiper-slide {
		text-align: center;
		font-size: 18px;
		/*     background: #fff; */
		display: flex;
		justify-content: center;
		align-items: center;
}

.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
}
  1. 스크립트 작성
const swiper = new Swiper(".section_All", {
		direction: "horizontal",
		slidesPerView: 1,
		spaceBetween: 30,
		mousewheel: true,
		pagination: {
				el: ".swiper-pagination",
				clickable: true,
		},
		hashNavigation: {
				watchState: true,
		},
});
const swiper2 = new Swiper(".vertical", {
		direction: "vertical",
		slidesPerView: 1,
		mousewheel: true,
});
es6 javascript library animation swiper

© Copyright 2024. All rights reserved.