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/0428.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0482.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0322.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0178.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0131.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0289.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0591.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0518.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0287.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0350.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0707.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0126.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0351.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0741.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0182.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0354.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0088.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0147.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0583.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0467.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0385.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' );

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

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