슬라이드 질문

미리보기로 썸네일 8개가 있고

버튼을 클릭하면 슬라이드가 넘어가고, 

썸네일을 클릭하면 클릭한 썸네일의 사진이 보여지는데 

만약 썸네일 3번을 클릭하고 다음 버튼을 누르면

4번 이미지가 보여야 하는데 1부터 시작이 되어서 2번 사진이 뜹니다.

그 후 다음버튼으로 4번까지 이동하고, 썸네일 8번을 클릭한 후 

이전 버튼을 누르면 7번으로 이동해야하는데 3번으로 이동하는 식으로요. 

썸네일 클릭할때 순서와 

버튼으로 클릭할때 순서가 같으려면 

어떻게 수정해야할까요? 

html은 ul과 li로 되어있습니다.

<div class="gallery-top"> <!-- 큰이미지 -->
        <ul>
            <li><div></div></li> 

            <li><div></div></li>  
        </ul>
  </div>
    <ul class="section5_thumbs"> <!-- 썸네일 -->

            <li><div></div></li> 

            <li><div></div></li>            
     </ul>    

<script>
$(document).ready(function(){
    var slide1_num = 0;    
    var galleryTopElement =  $('.gallery-top ul li').eq(slide1_num);
    /* 이전버튼 클릭하면 */
    $('.section5 .swiper-button-prev').click(function(){
        if(slide1_num <= 0){ 
            slide1_num = 7; 
        }else{
            slide1_num = slide1_num-1;
        }
        $('.gallery-top ul li').eq(slide1_num).stop().fadeIn(100).siblings().stop().fadeOut(100);
        $('.section5_thumbs li').eq(slide1_num).stop().animate({opacity:1}).siblings().stop().animate({opacity:0.4});
    });
    /* 다음버튼 클릭하면 */
      $('.section5 .swiper-button-next').click(function(){          
        if(slide1_num >= 7){ 
            slide1_num = 0;
        }else{
            slide1_num = slide1_num+1;
        }
     $('.gallery-top ul li').eq(slide1_num).stop().fadeIn(100).siblings().stop().fadeOut(100);
        $('.section5_thumbs li').eq(slide1_num).stop().animate({opacity:1}).siblings().stop().animate({opacity:0.4});
    });

    /* 썸네일 클릭하면 */
    $('.section5_thumbs li').slice(0,8).on('click', function(){
        var idx = $(this).index();
        $(this).stop().animate({opacity:1});
        $(this).siblings().stop().animate({opacity:0.4});
        $('.gallery-top ul li').eq(idx).stop().fadeIn(100).siblings().stop().fadeOut(100);
    });

})
</script>