speed 파라미터를 사용하여 속도를 조절하기
- 아래 이미지를 좌우로 드래그 해보세요.
슬라이드 랜덤사진 갤러리
<!-- 이 예제에서는 필요한 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:600px;
height:400px;
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 myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0465.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0156.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0026.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0719.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0505.webp"></div>
</div>
</div>
<div style="text-align:center; margin-top:5px;">슬라이드 랜덤사진 갤러리</div>
자바스크립트
// ※ 클래스명 myswiper 사용
new Swiper('.myswiper', {
// 슬라이드 속도 설정
// 지정하지 않을시 기본값은 300
speed : 1000,
});
실행 가능한 소스
다른 예제, 속도 빠르게
- 아래 이미지를 좌우로 드래그 해보세요.
슬라이드 랜덤사진 갤러리
HTML
<div class="swiper-container myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0269.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0629.webp"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cafe24.com/p/0785.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/0554.webp"></div>
</div>
<!-- 네비게이션 버튼 -->
<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
<div class="swiper-button-prev"></div><!-- 이전 버튼 -->
</div>
<div style="text-align:center; margin-top:5px;">슬라이드 랜덤사진 갤러리</div>
자바스크립트
// ※ 클래스명 myswiper 사용
new Swiper('.myswiper', {
// 슬라이드 속도 설정
// 지정하지 않을시 기본값은 300
speed : 10,
navigation : { // 네비게이션 설정
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
});
실행 가능한 소스
※ 예제에 사용한 모든 이미지들은 직접 촬영한 사진입니다.
※ 새로고침하면 사진이 바뀝니다. (이 사이트 기능입니다)
방문해 주셔서 감사드립니다. ^^*
※ 새로고침하면 사진이 바뀝니다. (이 사이트 기능입니다)
방문해 주셔서 감사드립니다. ^^*