개발
HTML & javascript ) 세로 슬라이드 만들기 (무한루프)
듀비양
2022. 5. 20. 01:55
슬라이드 조건
- 슬라이드 개수는 5개
- delay시간은 5초
- 자동으로 5초뒤면 넘어가고, 무한루프
swiper로 슬라이드 만들고, 세로 슬라이드 옵션을 켜면 익스플로러에서 깨지는 현상이 있었다.
그래서 그냥 직접 만들었던 세로 슬라이드 소스코드다. 그땐 DB에서 값 불러오는 슬라이드였어서 php 코드랑 얽혀있었는데 다 배제하고 슬라이드 기능만 있는 순수 html, javascript 코드다.
요샌 익스플로러까지 신경들 안쓰니, 그냥 스와이퍼 사용한다. 스와이퍼 짱짱맨
html, javascript 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<div class="slideList" id="slideList" NowIdx=0>
<div class="SlideBox" idx=0>
<div class="BsSubject">
<div style="float:left">내용 0 </div>
</div>
</div>
<div class="SlideBox" idx=1>
<div class="BsSubject">
<div style="float:left">내용 1 </div>
</div>
</div>
<div class="SlideBox" idx=2>
<div class="BsSubject">
<div style="float:left">내용 2 </div>
</div>
</div>
<div class="SlideBox" idx=3>
<div class="BsSubject">
<div style="float:left">내용 3 </div>
</div>
</div>
<div class="SlideBox" idx=4>
<div class="BsSubject">
<div style="float:left">내용 4 </div>
</div>
</div>
</div>
<script>
var ListCount = 5; // 슬라이드 개수
var MvPoint = 0; // 슬라이드가 움직일 거리
var NowIdx = 0; // 현재 index
var ListTimeout = "";
var SlideBox = document.getElementsByClassName("SlideBox");
var BoxHeight = SlideBox[0].offsetHeight;
var FirstBox = SlideBox[0].cloneNode(true);
var SlideTime = 5000; // 슬라이드 delay 시간 (5초)
document.getElementById("slideList").appendChild(FirstBox);
function SlideEffect(idx){
$(".slideList").css({"transform":"translate3d(0px, "+MvPoint+"px, 0px)", "transition":"0.3s"});
MvPoint = MvPoint-BoxHeight;
next_idx = idx+1;
if(idx == ListCount){
setTimeout(function(){
$(".slideList").css({"transform":"translate3d(0px,0px,0px)", "transition":"0s"});
}, 300);
idx = 0;
next_idx = 1;
MvPoint = 0 - BoxHeight;
}
$(".slideList").attr("NowIdx", idx);
setTimeout("SlideEffect(next_idx)",SlideTime);
}
$(window).ready(function(){
setTimeout("SlideEffect(0)", 0);
});
</script>
|
cs |
라이브러리로 다 되는 기능이지만, 한번씩 직접 하드코딩도 해 봐야한다.
어떻게 돌아가는지 알아야 라이브러리도 잘 쓰게되니까.
반대로 라이브러리 많이 써보는것도 코딩 실력 향상에 도움된다.
참 간단한건데 맨 처음 직접 하려고하면 어렵다.