swiper 슬라이더

<!-- 이 예제에서는 필요한 js, css 를 링크걸어 사용 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.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="http://superkts.dothome.co.kr/img/p/040.jpg"></div>
		<div class="swiper-slide"><img src="http://superkts.dothome.co.kr/img/p/073.jpg"></div>
		<div class="swiper-slide"><img src="http://mabinogi.filamt.com/img/p/414.jpg"></div>
		<div class="swiper-slide"><img src="http://mabinogi.filamt.com/img/p/639.jpg"></div>
		<div class="swiper-slide"><img src="http://biketago.com/img/p/615.jpg"></div>
		<div class="swiper-slide"><img src="http://oldmidi.cdn3.cafe24.com/p/558.jpg"></div>
		<div class="swiper-slide"><img src="http://mabinogi.filamt.com/img/p/591.jpg"></div>
		<div class="swiper-slide"><img src="http://superkts.dothome.co.kr/img/p/331.jpg"></div>
		<div class="swiper-slide"><img src="http://oldmidi.cdn3.cafe24.com/p/325.jpg"></div>
		<div class="swiper-slide"><img src="http://oldmidi.cdn3.cafe24.com/p/603.jpg"></div>
		<div class="swiper-slide"><img src="http://superkts.dothome.co.kr/img/p/254.jpg"></div>
		<div class="swiper-slide"><img src="http://superkts.dothome.co.kr/img/p/359.jpg"></div>
		<div class="swiper-slide"><img src="http://mabinogi.filamt.com/img/p/629.jpg"></div>
		<div class="swiper-slide"><img src="http://superkts.dothome.co.kr/img/p/229.jpg"></div>
		<div class="swiper-slide"><img src="http://mabinogi.filamt.com/img/p/363.jpg"></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');