- 설정이 다른 두개의 슬라이드 생성.
- 임의로 클래스명을 하나더 추가해서 쉽게 사용할 수 있음.
여러개의 이미지 슬라이드 생성한 예제
랜덤사진 갤러리1 (swiper1)
랜덤사진 갤러리2 (swiper2)
<!-- 이 예제에서는 필요한 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; /* 좌우 기준 중앙정렬 */
}
.swiper-slide img {
box-shadow:0 0 5px #555;
}
HTML
<!-- 구분용 swiper1 추가 -->
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0536.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0727.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0484.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0065.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0368.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;">랜덤사진 갤러리1 (swiper1)</div>
<br>
<!-- 구분용 swiper2 추가 -->
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0571.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0083.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0805.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0527.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0573.webp"></div>
</div>
<!-- 페이징 -->
<div class="swiper-pagination"></div>
</div>
<div style="text-align:center; margin-top:5px;">랜덤사진 갤러리2 (swiper2)</div>
자바스크립트
// swiper1
new Swiper('.swiper1', {
pagination : { // 페이징 설정
el : '.swiper-pagination',
clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
},
navigation : { // 네비게이션 설정
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
});
// swiper2
new Swiper('.swiper2', {
loop : true, // 무한 루프 슬라이드, 반복이 되며 슬라이드가 끝이 없다.
pagination : {
el : '.swiper-pagination',
},
});
요약 정리
HTML
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">내용</div>
<div class="swiper-slide">내용</div>
</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">내용</div>
<div class="swiper-slide">내용</div>
</div>
</div>
자바스크립트
new Swiper( '.swiper1' );
new Swiper( '.swiper2' );
두개이상 동시 사용할때 각각 설정이 다르다면 위처럼 임의로 클래스명을 정해줍니다.
그리고 그 클래스명을 이용해서 Swiper 를 초기화하면 됩니다.
주의 : 기존 swiper-container 는 그대로 유지해야 합니다.
swiper-container 를 없애거나 이름을 바꾸면 안됩니다.
※ 예제에 사용한 모든 이미지들은 직접 촬영한 사진입니다.
※ 새로고침하면 사진이 바뀝니다. (이 사이트 기능입니다)
방문해 주셔서 감사드립니다. ^^*
※ 새로고침하면 사진이 바뀝니다. (이 사이트 기능입니다)
방문해 주셔서 감사드립니다. ^^*