이미지 슬라이드 소스를 구했습니다. 채택완료
디자인아루즈
2년 전
조회 1,985
다 좋은데 자동으로 넘어가지 않습니다.
어디를 어떻게 수정하면 될까요?
</p>
<p><!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Swiper 쉬운 예제 모음 : Swiper 그룹 다중 슬라이드 (Multiple Slides Per Group)</title>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
</head>
<body></p>
<p><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="<a href="https://ktsmemo.cafe24.com/s/SwiperJS/367"" target="_blank" rel="noopener noreferrer">https://ktsmemo.cafe24.com/s/SwiperJS/367"</a> target="_blank"><a href="https://ktsmemo.cafe24.com/s/SwiperJS/367</a>" target="_blank" rel="noopener noreferrer">https://ktsmemo.cafe24.com/s/SwiperJS/367</a></a>
</div></p>
<p>
<!-- 예제 시작 --></p>
<p><!-- 이 예제에서는 필요한 js, css 를 링크걸어 사용 -->
<link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script></a></p>
<p><style type="text/css"></p>
<p>.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%; /* 이미지 최대너비를 제한, 슬라이드에 이미지가 여러개가 보여질때 필요 */
/* 이 예제에서 필요해서 설정했습니다. 상황에따라 다를 수 있습니다. */
}</p>
<p></style></p>
<p><!-- 클래스명은 변경하면 안 됨 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="<a href="https://oldmidi.cafe24.com/p/0348.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cafe24.com/p/0348.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://superkts.cafe24.com/p/0806.jpg"></div>" target="_blank" rel="noopener noreferrer">https://superkts.cafe24.com/p/0806.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cafe24.com/p/0506.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cafe24.com/p/0506.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cdn3.cafe24.com/p/0748.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cdn3.cafe24.com/p/0748.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cdn3.cafe24.com/p/0392.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cdn3.cafe24.com/p/0392.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://superkts.cafe24.com/p/0063.jpg"></div>" target="_blank" rel="noopener noreferrer">https://superkts.cafe24.com/p/0063.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cdn3.cafe24.com/p/0622.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cdn3.cafe24.com/p/0622.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cdn3.cafe24.com/p/0571.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cdn3.cafe24.com/p/0571.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cafe24.com/p/0750.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cafe24.com/p/0750.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cafe24.com/p/0823.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cafe24.com/p/0823.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://ktsmemo.cdn3.cafe24.com/p/0534.jpg"></div>" target="_blank" rel="noopener noreferrer">https://ktsmemo.cdn3.cafe24.com/p/0534.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://ktsmemo.cdn3.cafe24.com/p/0815.jpg"></div>" target="_blank" rel="noopener noreferrer">https://ktsmemo.cdn3.cafe24.com/p/0815.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://oldmidi.cafe24.com/p/0337.jpg"></div>" target="_blank" rel="noopener noreferrer">https://oldmidi.cafe24.com/p/0337.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://ktsmemo.cdn3.cafe24.com/p/0230.jpg"></div>" target="_blank" rel="noopener noreferrer">https://ktsmemo.cdn3.cafe24.com/p/0230.jpg"></div></a>
<div class="swiper-slide"><img src="<a href="https://superkts.cafe24.com/p/0350.jpg"></div>" target="_blank" rel="noopener noreferrer">https://superkts.cafe24.com/p/0350.jpg"></div></a>
<div class="swiper-slide" style="font-size:50pt;">- 끝 -</div>
</div></p>
<p> <!-- 네비게이션 -->
<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
<div class="swiper-button-prev"></div><!-- 이전 버튼 --></p>
<p> <!-- 페이징 -->
<div class="swiper-pagination"></div>
</div>
<div style="text-align:center; margin-top:5px;">랜덤사진 갤러리</div></p>
<p><script></p>
<p>new Swiper('.swiper-container', {</p>
<p> slidesPerView : 3, // 동시에 보여줄 슬라이드 갯수
spaceBetween : 30, // 슬라이드간 간격
slidesPerGroup : 3, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음</p>
<p> // 그룹수가 맞지 않을 경우 빈칸으로 메우기
// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
loopFillGroupWithBlank : true,</p>
<p> loop : true, // 무한 반복</p>
<p> pagination : { // 페이징
el : '.swiper-pagination',
clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
},
navigation : { // 네비게이션
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
});</p>
<p></script></p>
<p><!-- 예제 종료 --></p>
<p>
</body>
</html></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
다음과 같이 해보실 수 있을 것 같습니다.
참고하셔서 원하시는 형태로 구현 하시면 될것 같습니다
Swiper를 자동으로 슬라이드하게 하려면 autoplay 옵션을 추가하시면 됩니다.
autoplay 옵션은 자동 슬라이딩을 활성화하고, delay 옵션을 통해 슬라이드 간의 지연 시간을 설정할 수 도 있습니다.
</p>
<p><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>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
디자인아루즈
2년 전
감사합니다..^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인