이미지 슬라이드 소스를 구했습니다.
본문
다 좋은데 자동으로 넘어가지 않습니다.
어디를 어떻게 수정하면 될까요?
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Swiper 쉬운 예제 모음 : Swiper 그룹 다중 슬라이드 (Multiple Slides Per Group)</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/SwiperJS/367" target="_blank">https://ktsmemo.cafe24.com/s/SwiperJS/367</a>
</div>
<!-- 예제 시작 -->
<!-- 이 예제에서는 필요한 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>
<style type="text/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%; /* 이미지 최대너비를 제한, 슬라이드에 이미지가 여러개가 보여질때 필요 */
/* 이 예제에서 필요해서 설정했습니다. 상황에따라 다를 수 있습니다. */
}
</style>
<!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://oldmidi.cafe24.com/p/0348.jpg"></div>
<div class="swiper-slide"><img src="https://superkts.cafe24.com/p/0806.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cafe24.com/p/0506.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cdn3.cafe24.com/p/0748.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cdn3.cafe24.com/p/0392.jpg"></div>
<div class="swiper-slide"><img src="https://superkts.cafe24.com/p/0063.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cdn3.cafe24.com/p/0622.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cdn3.cafe24.com/p/0571.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cafe24.com/p/0750.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cafe24.com/p/0823.jpg"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cdn3.cafe24.com/p/0534.jpg"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cdn3.cafe24.com/p/0815.jpg"></div>
<div class="swiper-slide"><img src="https://oldmidi.cafe24.com/p/0337.jpg"></div>
<div class="swiper-slide"><img src="https://ktsmemo.cdn3.cafe24.com/p/0230.jpg"></div>
<div class="swiper-slide"><img src="https://superkts.cafe24.com/p/0350.jpg"></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>
<script>
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', // 이번 버튼 클래스명
},
});
</script>
<!-- 예제 종료 -->
</body>
</html>
답변 1
다음과 같이 해보실 수 있을 것 같습니다.
참고하셔서 원하시는 형태로 구현 하시면 될것 같습니다
Swiper를 자동으로 슬라이드하게 하려면 autoplay 옵션을 추가하시면 됩니다.
autoplay 옵션은 자동 슬라이딩을 활성화하고, delay 옵션을 통해 슬라이드 간의 지연 시간을 설정할 수 도 있습니다.
<script>
new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loopFillGroupWithBlank: true,
loop: true,
autoplay: {
delay: 3000, // 3초마다 슬라이드 변경 (1000ms = 1초)
disableOnInteraction: false, // 사용자 인터랙션(터치, 클릭 등) 시 자동 슬라이딩 중지 여부
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
감사합니다..^^
답변을 작성하시기 전에 로그인 해주세요.
