Swiper 쉬운 예제 모음

Swiper 네비게이션 (Navigation) 적용 ( <, > 버튼 )

등록일 :

네비게이션(Navigation)을 적용한 예제

- 좌우 화살표가 네비게이션 입니다.
- 아래 이미지를 좌우로 드래그 해보세요.
- 좌우 화살표 버튼을 눌러보세요.
- 끝 -
랜덤사진 갤러리
<!-- 이 예제에서는 필요한 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: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

<!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0675.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0271.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0806.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0004.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0670.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0606.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0125.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0429.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0797.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0288.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0609.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0064.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0211.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/0272.webp"></div>
		<div class="swiper-slide" style="font-size:50pt;">- 끝 -</div>
	</div>

	<!-- 네비게이션 지정 -->
	<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
	<div class="swiper-button-prev"></div><!-- 이전 버튼 -->
</div>
<div style="text-align:center; margin-top:5px;">랜덤사진 갤러리</div>

자바스크립트

new Swiper('.swiper-container', {
	navigation : {
		nextEl : '.swiper-button-next', // 다음 버튼 클래스명
		prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
	},
});

실행 가능한 소스

요약 정리

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

    <!-- 네비게이션 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

자바스크립트
new Swiper( '.swiper-container', {
    navigation : { // 네비게이션
        nextEl : '.swiper-button-next', // 오른쪽(다음) 화살표
        prevEl : '.swiper-button-prev', // 왼쪽(이전) 화살표
    },
});

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

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