Swiper 쉬운 예제 모음

Swiper 그룹 다중 슬라이드 (Multiple Slides Per Group)

등록일 :

다중으로 설정된 슬라이드를 그룹으로 묶어서 슬라이딩 하는 예제

예제 간단 설명
- 3개씩 보여지는 설정과 내용물 3개를 그룹으로 묶어서 슬라이딩 함.
- 예제에서는 임의로 3개로 설정하였습니다.
- 좌우 너비가 일정 수치 이하로 작아지면 이미지도 작아집니다.
- 끝 -
랜덤사진 갤러리
<!-- 이 예제에서는 필요한 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 {
	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; /* 좌우 기준 중앙정렬 */
}
.swiper-slide img {
	box-shadow:0 0 5px #555;
	max-width:100%; /* 이미지 최대너비를 제한, 슬라이드에 이미지가 여러개가 보여질때 필요 */
	/* 이 예제에서 필요해서 설정했습니다. 상황에따라 다를 수 있습니다. */
}

HTML

<!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0220.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0118.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0819.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0149.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0124.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0818.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0196.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0481.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/0667.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0080.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0446.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0831.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0316.webp"></div>
		<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0472.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 class="swiper-pagination"></div>
</div>
<div style="text-align:center; margin-top:5px;">랜덤사진 갤러리</div>

자바스크립트

new Swiper('.swiper-container', {

	slidesPerView : 3, // 동시에 보여줄 슬라이드 갯수
	spaceBetween : 30, // 슬라이드간 간격
	slidesPerGroup : 3, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음

	// 그룹수가 맞지 않을 경우 빈칸으로 메우기
	// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
	loopFillGroupWithBlank : true,

	loop : true, // 무한 반복

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

실행 가능한 소스

요약 정리

자바스크립트
new Swiper( '.swiper-container', {

    slidesPerView : 3, // 동시에 보여줄 슬라이드 갯수
    spaceBetween : 30, // 슬라이드간 간격
    slidesPerGroup : 3, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음

    // 그룹수가 맞지 않을 경우 빈칸으로 채우기 여부
    // 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
    loopFillGroupWithBlank : true,

});

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

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