간단한 콘텐츠 슬라이더가 제대로 작동하지 않습니다.

Question

간단한 슬라이드를 사용하여 3 개의 슬라이드에서 고객의 리뷰를 볼 수 있습니다. 이것은 지금까지 가지고있는 코드입니다 JSFiddle, 어떻게 든 3+ 슬라이드처럼 보여줍니다 (세 div를 표시하는 대신 더 빈 "것들을 보여줍니다). 그래서 세 번째 슬라이드 이후에 첫 번째 슬라이드에서 다시 시작해야합니다.

내가 가지고있는 또 다른 문제점은 JSfiddle에서 작동하는 것처럼 보일 수 있지만 HTML을 복사하여 붙여 넣을 때 작동하지 않는다는 것입니다. 내 HTML에 추가 한

두 라인은

<script src="Webdesign/NagelsalonHintham/js/functions.js"></script> 
<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 

누군가가 나를 도울 수 주시기 바랍니다 있습니다.

Answer 1

첫 번째 질문에 답하려면 JS에서보다 구체적이어야하기 때문에 원하는 슬라이드보다 많은 슬라이드를 얻는 것이 좋습니다.

다음 및 이전 버튼 이벤트 핸들러는 '슬라이더'div를 이동하기 위해 jQuery 애니메이션을 사용합니다. 괜찮습니다. 그러나 특정 방향으로 보여줄 슬라이드가 더 이상 없다면 더 멀리 움직이는 div를 막기 위해 추가 논리를 추가해야합니다.

이

var sliderWidth = 300; 
var slider = $('#slidie'); 
var sliderCount = $('div', slider).length; 
slider.width(sliderCount * sliderWidth); 

var currentSlide = 1; 

$('a.prev').click(function() { 
    if (currentSlide > 1) { 
     $('#slidie').animate({ 
      left: '+=' + sliderWidth 
     }, 500); 
     currentSlide -= 1; 
    } 
}); 

$('a.next').click(function() { 
    if (currentSlide < sliderCount) { 
     $('#slidie').animate({ 
      left: '-=' + sliderWidth 
     }, 500); 
     currentSlide += 1; 
    } 
}); 

내가 추가 한 모든 1로 초기화됩니다 currentSlide라는 추가 변수 슬라이드 인 당신이 추적하는이 필요하다 : 난 당신이 원하는 무엇을 믿는 구현하기 위해 JS를 변경 한 현재 사용자에게 표시됩니다.

그런 다음 두 이벤트 처리기에서 currentSlide이 애니메이션이 실행되도록 허용되는지 확인합니다. 현재 슬라이드가 > 1 인 경우에만 이전 버튼이 작동하기를 원합니다. 즉, 첫 번째 슬라이드에 있지 않은 경우입니다. 마찬가지로 현재 슬라이드가 < sliderCount 인 경우에만 다음 버튼이 작동하기를 원합니다. 즉, 최종 슬라이드에 있지 않은 것입니다.

사용자가 현재보고있는 것과 동기화되도록 애니메이션을 수행 한 후에도 currentSlide을 변경해야합니다. 이는 currentSlide -= 1 및 currentSlide += 1 코드 행을 사용하여 수행됩니다.

두 번째 질문에 대답하려면 jQuery가 코드가 실행되기 전에로드가 완료되지 않았다고 문제가 있다고 상상해보십시오. 내가 먼저 순서를 다시 것입니다 스크립트 태그를 HTML에 jQuery를 먼저로드되도록 :

<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 
<script src="Webdesign/NagelsalonHintham/js/functions.js"></script> 

또한, 안전을 위해 내가 jQuery를 DOM ready 이벤트에 코드를 포장한다. 이것은 기본적으로 작성한 코드가 JS (HTML 페이지에 액세스 할 수있는 프레임 워크)가 브라우저에서 생성 된 후에 만 ​​실행된다는 것을 의미합니다. 그러므로 어떤 태그 (참조)를 참조하면 JS가 실행되기 전에 태그가 실제로 존재한다는 것을 알 수 있습니다. 이 아래에 예시되어있다 : 그들은 jQuery를가 (기본적으로) 올바른 위치에 코드를 넣어 포함, 당신을 위해 포함 할 수 있기 때문에 JSFiddle에서 작동

$(document).ready(function() { 

    // Your code from above goes here 

}); 

이유입니다. JSFiddle 윈도우의 왼쪽에서 변경할 수 있습니다.

는 참고로,이 솔루션의 작업 JSFiddle은 여기에 있습니다 : 당신의 응답을 http://jsfiddle.net/EULJd/