초보개발자종석
150
2019-01-11 16:06:06
3
213

슬라이드 prev next 버튼 구현중 문제가발생하였습니다...도와주십쇼 ㅠㅠ


prev next 을 구현중인데... 


prev의 이전 기능

next의 다음 기능은 구현이 어느정도되었는데


prev를 눌렀을때 첫페이지에서 -> 마지막페이지 (1페이지 ->  마지막페이지)로 안넘어갑니다..


이상하게 

next를 눌렀을땐 (4페이지 -> 1페이지)로 가는데말입니다...

(사실이것도 왜 가는지 모르겠습니다 ㅠㅠㅠㅠ...) 


원인이 뭔지 도와주십쇼.,.,. 아래는 소스코드입니다 !!...


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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    *{
        margin:0;
        padding:0;
    }   
    /*
    ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    슬라이드부분
    □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
    1. 슬라이드 main
       - div태그 (.slider) : relative(부모)  
       - div태그 (.label) : absolute(자식)
       - .slider안에 .label 포함
    */
    .slider {margin: 0 auto;position : relative;}    
    .slider>ul{list-style: none;}
    .slider>.label>#index-label {position: absolute;color: white;top:1%;left:1%;text-align:left;width: 100%;}
    .slider>.label>#title-label {position: absolute;color: white;top:5%;left:1%;text-align:left;width: 100%;}    
    /*
    □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
    2. 슬라이드 dot
        - div태그 (.slider) : relative(부모)
        - div태그 (#dot_id) : absolute(자식)
        - .slider안에 #dot_id 포함
    */ 
    .dot {
        opacity: 0.5;
        cursor: pointer;
        height: 30px;
        width: 30px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    /*dot에 마우스 올라갈때 속성 (자바스크립트로 자동변화시 변화는 jquery로 아래에 따로 정의함)*/
    #dot_id{
        position: absolute;
        top: 94%;
        left:50%;
        transform: translate(-50%, -50%)
      
    }
    /*
    □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
    3. 슬라이드 img 부분
        - 넣고싶은데로 child값과 이미지를 넣을 수 있게 구현
        - background-position, size는 각각 center/cover로 고정 ( 이미지 고정 )
    */ 
    .slider li{
        background-position: center;
        background-size: cover;       
    }
    .slider li:nth-child(1) {
        background-image: url("img/slider1.jpg");
    }
    .slider li:nth-child(2) {
        background-image: url("img/slider2.jpg");
    }
    .slider li:nth-child(3) {
        background-image: url("img/slider3.jpg");
    }
    .slider li:nth-child(4) {
        background-image: url("img/slider4.jpg");
    }
    .slider li:nth-child(5) {
        background-image: url("img/slider5.jpg");
    }
    .slider li:nth-child(6) {
        background-image: url("img/slider6.jpg");
    }
    /*
    □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
    슬라이드부분 끝
    ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    */ 
    
</style>
<script>
    $(document).ready(function (){
        var length = $(".slider li").length
        
        //전체 슬라이더 크기 지정 (원래 사진 크기 무시 => 자동 확장기능 o => 화질이 깨질수도있음)
        //되도록이면 사진과 width, height 값을 맞추는 걸 추천함!
        var width = 1800
        var height = 900
        
 
        
        $(".slider").css({
            width: width,
            height: height,
            overflow: "hidden"
         
        })
       
        $(".slider ul").css({
            width: width * length
        })
        $(".slider li").css({
            width: width,
            height: height,
            float:"left"
        })
        
        //moveTo(1) , moveTo(2) .....
        /* 
        
        ■ maginLeft에 값을 주는 만큼 움직인다...즉 marginLeft가 -width*1 일때는 한칸왼쪽으로.. -width*2 일때는 두칸
        
        $(".slider ul").css({
            marginLeft : -200
        })
    
        */
        
        var moveTo = function(index){
            //인덱스가 0이면 실행이 안되니까..
            //if(!index) {index = 1}
            //매개변수 보완
            index = index || 0
            index = index % length
            //애니메이션으로 이동!
            $(".slider ul").animate({
                marginLeft : -width * index
            })
            
            //title변경부분
            var title = $($(".slider li").get(index)).attr("data-title")
            $("h1").html(title)
            $("h2").html("0" + (index + 1))
            currentIndex = index
            
            $("div[data-index]").css({
                //버튼 비활성화상태 색
                backgroundColor : "white"})
            $("div[data-index=" +index +"]")
                .css('box-shadow''2px 2px 10px #888')                
                .css({
                //버튼 활성화상태 색
                backgroundColor : "#4682b4",
            })
            
        }
       
        for (var i = 0; i < length; i++) {
            (function (i) {
                $("<div class='dot'></div>")   
                    .attr("data-index", i)
                    .click(function () {
                    moveTo(i)
                    })
                
                //#dot_id 태그 안에 넣는다.
                 .appendTo("#dot_id")
                   
            })(i)
        }
        
     
             
               
        var currentIndex = 0
            setInterval(function () {
                currentIndex += 1
                moveTo(currentIndex)                
            }, 1000 * 4)
        moveTo(0)
        
        
        $(".prev").css({
            fontSize: 90
        })
        .click(function(){
            moveTo(currentIndex += -1)          
        })
        
        $(".next").css({
            fontSize: 90
        })
        .click(function(){
            moveTo(currentIndex += 1)
        })
        
        
        //크롬 console창에서 moveSlier(index) 으로 확인
        //window.moveSlider = moveTo
        
        
        
    });
    
    
    
</script>
</head>
<body>
   
    <div id="wrapper">   
 
            <div class="slider">
                <ul>
                    <li data-title="첫번째사진입니다"></li>
                    <li data-title="두번째사진"></li>
                    <li data-title="세번째사진"></li>
                    <li data-title="네번째사진"></li>
                    <li data-title="다섯번째사진"></li>
                    <li data-title="여섯번째사진"></li>                    
                </ul>
                <div class="label">
                    <h2 id="index-label"></h2>
                    <h1 id="title-label"></h1>
                </div>
                <div id ="dot_id">
                    <!--class="dot"모임-->
                </div>
          
              
            </div>
            
    </div>
  <a class="prev">❮</a>
  <a class="next">❯</a>
</body>
</html>
cs
0
0
  • 답변 3

  • 유리세계
    1k
    2019-01-11 16:12:06

    index = index % length

    INDEX 계산할때 ( -1 % 4 = -1 )로 나오는데... 이거 때문에 그런거 아닌가요



    0
  • 니플
    31k
    2019-01-11 16:16:34

    소스를 넣으실때는

    가능한 위 아래 공간은 없애서 주세요 ㅎㅎ

    불필요하게 스크롤해야되네요 ㅎㅎ

    0
  • 꿀두
    1k
    2019-01-11 16:35:02
    index 0 에서 뒤로가기 버튼하게되면 index 5가 나와야하는데 -1이 나오면서 생기는 현상이네요
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.