이미지 슬라이더 ... 다음 및 이전 버튼이 작동하지 않습니다.

Question

jquery 이미지 슬라이더를 사용하여 다음 이미지 세트로 스크롤 할 수 없습니다. 다음 화살표를 클릭하면 페이지 맨 위로 다시 이동합니다. 이미지의 다음 행이 제대로 설정되었는지 확실하지 않습니다. 죄송 합니다만 jquery를 처음 사용합니다.

HTML

<div id="wrapper2"> 
<label style="color: #5C5C5C;display: block; font-weight: bold; font-size:16px; text-align: center;margin-bottom:0px;padding-bottom:20px;">Reaching our Goal is proud to partner with great organizations</label> 
     <div id="thumbs-wrapper2"> 
      <div id="thumbs"> 
       <a class="selected" href="#2"><img src="/assets/images/ROG_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/gametime_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/american_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/bfs_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/vballfestival_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/yfbca_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/sportsattack_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/ROG_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/gametime_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/american_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/bfs_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/vballfestival_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/yfbca_p.jpg" /></a> 
       <a href="#"><img src="/assets/images/sportsattack_p.jpg" /></a> 
      </div> 
      <a id="prev" href="#"></a> 
      <a id="next" href="#"></a> 
     </div> 
</div> 

스크립트

$('#thumbs').carouFredSel({ 
     responsive: true, 
     auto: true, 
     prev: '#prev', 
     next: '#next', 
     items: { 
      visible: 
      min: 2, 
      max: 4 
      }, 
      width: 150, 
      height: '25%' 
    }); 
    }); 

    $('#thumbs a').click(function() { 
     $('#carousel').trigger('slideTo', '#'+this.href.split('#').pop()); 
     $('#thumbs a').removeClass('selected'); 
     $(this).addClass('selected'); 
     return false; 
    }); 

CSS

#wrapper2 { 
    position: relative; 
    width: 100%; 
    top: 50px; 
} 
#carousel, #thumbs { 
    overflow: hidden; 
    height: 62px; 
} 

#carousel span, #carousel img, 
#thumbs a, #thumbs img { 
    display: block; 
    float: left; 
} 
#carousel span, #carousel a, 
#thumbs span, #thumbs a { 
    position: relative; 
} 
#carousel img, 
#thumbs img { 
    border: medium none; 
    height: 58px; 
    left: 0; 
    position: relative; 
    top: 0; 
    width: 100px; 
} 
#carousel img.glare, 
#thumbs img.glare { 
    width: 102%; 
    height: auto; 
} 

#thumbs-wrapper2 { 
    padding: 20px 40px; 
    position: relative; 
    width: 73%; 
    margin: -18px 0 0 162px; 
    height: 90px; 
} 
#thumbs a { 
    height: 58px; 
    margin: 0 10px; 
    overflow: hidden; 
    width: 100px; 
    border: 2px solid #899; 
    border-radius: 10px; 
    -webkit-transition: border-color .5s; 
    -moz-transition: border-color .5s; 
    -ms-transition: border-color .5s; 
    transition: border-color .5s; 

} 
#thumbs a:hover, #thumbs a.selected { 
    border-color: #566; 
} 

#prev, #next { 
    display: block; 
    height: 50px; 
    margin: -38px 0 0 -35px; 
    position: absolute; 
    top: 50%; 
    width: 50px; 
} 
#prev { 
    background-image: url(/assets/images/left.jpg); 
    background-position: 0 0; 
    left: 10px; 
} 
#next { 
    background-image: url(/assets/images/right.jpg); 
    background-position: -50px 0; 
    right: 33px; 
}   
#prev:hover { 
    background-position: 0 0;    
} 
#next:hover { 
    background-position: -50px 0;    
} 

#prev.disabled, #next.disabled { 
    display: none !important; 
} 

Answer 1

다음 및 이전 태그의 href="#"는 원인이된다. 그들을 제거하거나 자바 스크립트는 HTML 아래에 있는지 확인 href="javascript:void(0)"

Answer 2

로 변경하거나, 또한 $(function()

$(function() { 
    $('#thumbs').carouFredSel({ 
     responsive: true, 
     auto: true, 
     prev: '#prev', 
     next: '#next', 
     items: { 
      visible: 
      min: 2, 
      max: 4 
      }, 
      width: 150, 
      height: '25%' 
    }); 
    }); 

    $('#thumbs a').click(function() { 
     $('#carousel').trigger('slideTo', '#'+this.href.split('#').pop()); 
     $('#thumbs a').removeClass('selected'); 
     $(this).addClass('selected'); 
     return false; 
    }); 
}); 

사용하여 서라운드, 대부분의 브라우저의 기본 동작은 페이지마다 상단에 당신을 데려하는 것입니다 그것은 당신이 click()

$('#thumbs a').click(function(e) { 
    e.preventDefault(); // add this 
    $('#carousel').trigger('slideTo', '#'+this.href.split('#').pop()); 
    $('#thumbs a').removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
}); 

에 의해 전달 된 event 객체에 .preventDefault()를 호출하여 그 동작을 중지 그것을 말할 수있는, href의 # 본다

편집 : 문제는 구문 오류로 인해 발생 :

$('#thumbs').carouFredSel({ 
     responsive: true, 
     auto: true, 
     prev: '#prev', 
     next: '#next', 
     items: { 
      visible: // here you forgot to assign anything to visible 
      min: 2, 
      max: 7