Swiper 쉬운 예제 모음

Swiper 이미지 동적 로딩 (lazy)

등록일 :

다음, 이전 이미지를 슬라이드 할 때 로딩(동적 로딩)


- 아래 이미지를 좌우로 드래그 해보세요.
- 이미지가 많을 경우 필요할때만 로딩하는 동적로딩 예제입니다.
- 현재 이미지 기준 이전, 다음 이미지를 로딩합니다.
- 이미지가 아주 많을때 사용하면 좋습니다.

※ 아래 예제는 무려 30개의 이미지를 사용하지만 처음 페이지 로딩시
　 단, 2~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 {
	width:650px;
	height:440px;
	border:5px solid silver;
	border-radius:5px;
	box-shadow:0 0 20px #ccc inset;
}
.swiper-slide {
	text-align:center;
	display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
	align-items:center; /* 위아래 기준 중앙정렬 */
	justify-content:center; /* 좌우 기준 중앙정렬 */
}
.swiper-slide img {
	border:1px solid #000;
	box-shadow:7px 7px 2px #ccc;
}

HTML

<!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0236.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0646.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0120.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0540.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0710.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0091.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0413.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0025.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0522.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0041.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0252.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0828.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0814.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0594.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0356.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0283.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0784.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0278.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0344.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0485.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0521.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0441.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0741.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0308.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0517.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0705.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0819.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0077.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0780.webp" class="swiper-lazy"></div>
		<div class="swiper-slide"><img data-src="https://ktsmemo.cafe24.com/p/0491.webp" class="swiper-lazy"></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', {

	// ★동적로딩 설정
	lazy : {
		loadPrevNext : true // 이전, 다음 이미지는 미리 로딩
	},

	// 페이징 설정
	pagination : {
		el : '.swiper-pagination',
		clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
	},

	// 네비게이션 설정
	navigation : {
		nextEl : '.swiper-button-next', // 다음 버튼 클래스명
		prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
	},
});

실행 가능한 소스

요약 정리

HTML
<div class="swiper-container">
    <div class="swiper-wrapper">
         <div class="swiper-slide"><img data-src="이미지 경로" class="swiper-lazy"></div>
    </div>
</div>


자바스크립트
new Swiper( '.swiper-container', {
     // 동적로딩 설정
    lazy : {
        loadPrevNext : true // 이전, 다음 이미지는 미리 로딩
    },
});

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

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