<div class="control_panel">
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
</div>
</div>

 

이렇게 컨트롤버튼 7개를 형성한 뒤

 

<div class="animation_canvas">
<div class="slider_panel">
<img src="1.jpg" class="slider_image" />
<img src="2.jpg" class="slider_image" />
<img src="3.jpg" class="slider_image" />
<img src="4.jpg" class="slider_image" />
<img src="5.jpg" class="slider_image" />
<img src="6.jpg" class="slider_image" />
<img src="7.jpg" class="slider_image" />
</div>

....

...

</div>

 

이렇게 버튼을 누르면 이미지가 슬라이드 되도록 만들었는데, 현재 짠 것으로는 5개밖에 버튼과 이미지가 연동이 안되는데 어떤게 문제인가요?

 

$(document).ready(function () {
function moveSlider( index ) {
var willMoveLeft = -( index * 600 );
$( '.slider_panel' ).animate( {
left: willMoveLeft
}, 'slow' );
$( '.control_button[data-index=' + index + ']' )
.addClass( 'active' );
$( '.control_button[data-index!=' + index + ']' )
.removeClass( 'active' );
$( '.control_button' ).each( function ( index ) {
$( this ).attr( 'data-index', index );
}).click( function () {
var index = $( this ).attr( 'data-index' );
moveSlider( index );
});

 

다 가져올 수는 없으니 button 관련 소스만 첨부합니다.

 

어딜봐도 5개만 연동된다는 부분은 없는 것 같은데 6번째 버튼부터는 이미지가 전혀 뜨질 않네요..