<!-- 이 예제에서는 필요한 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:640px;
    height:420px;
    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; /* 좌우 기준 중앙정렬 */
}

HTML

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0433.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/0384.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0120.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0238.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0695.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0382.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0012.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0699.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0594.webp"></div>
	</div>

	<!-- 네비게이션 버튼 -->
	<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
	<div class="swiper-button-prev"></div><!-- 이전 버튼 -->

	<!-- 페이징 -->
	<div class="swiper-pagination"></div>
</div>
<div style="text-align:center; margin-top:5px;">랜덤사진 갤러리</div>

자바스크립트

new Swiper( '.swiper-container', {

	effect : 'fade', // 페이드 효과 사용

	loop : true, // 무한 반복
	pagination : { // 페이징 설정
		el : '.swiper-pagination',
		clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
	},
	navigation : { // 네비게이션 설정
		nextEl : '.swiper-button-next', // 다음 버튼 클래스명
		prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
	},
});

실행 가능한 소스