Swiper 쉬운 예제 모음

Swiper 완전 기본 예제

등록일 :

이미지를 사용한 Swiper 완전 기본 예제

아무 옵션도 사용하지 않은 완전 기본 예제입니다.
Swiper 가 어떻게 작동 하는지 알아 보기에 좋습니다.
예제에서는 이미지 갤러리 용도로 사용했지만
응용하면 다양한 용도로 사용할 수 있습니다.

- 아래 이미지를 좌우로 드래그 해보세요.
- 끝 -
사진 갤러리
<!-- 이 예제에서는 필요한 js, css 를 링크걸어 사용 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

CSS

.swiper-container {
	width:550px;
	height:380px;
	border:5px solid silver;
	border-radius:7px;
	box-shadow:0 0 20px #ccc inset;
}
.swiper-slide {
	text-align:center;
	display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
	align-items:center; /* 위아래 기준 중앙정렬 */
	justify-content:center; /* 좌우 기준 중앙정렬 */
}
.swiper-slide img {
	box-shadow:0 0 5px #555;
}

/* 스타일은 상황에 맞게 수정하여 사용하면 됩니다. */

HTML

<!-- Swiper를 사용하기 위한 최소 기본 형태 -->
<!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0185.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0486.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0711.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0693.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0603.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0740.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0027.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0756.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0301.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0406.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0034.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0363.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0100.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0471.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0390.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0116.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0768.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0811.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0041.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0128.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0263.webp"></div>
		<div class="swiper-slide" style="font-size:50pt;">- 끝 -</div>
	</div>
</div>
<div style="text-align:center; margin-top:5px;">사진 갤러리</div>

자바스크립트

// 클래스명 swiper-container 입력
// 이 클래스명은 변경하면 안됨
new Swiper('.swiper-container');

실행 가능한 소스

요약 정리

HTML
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">내용</div>
        <div class="swiper-slide">내용</div>
        <div class="swiper-slide">내용</div>
        <div class="swiper-slide">내용</div>
    </div>
</div>

자바스크립트
new Swiper( '.swiper-container' );

※ 예제에 사용한 모든 이미지들은 직접 촬영한 사진입니다.
※ 새로고침하면 사진이 바뀝니다. (이 사이트 기능입니다)

방문해 주셔서 감사드립니다. ^^*