내 사이트에서 부드러운 스크롤 슬라이더를 작동시킬 수 없습니다.

내 포트폴리오 사이트에서 작동하는 "smooth div scroll"을 얻을 수없는 이유가 무엇입니까 ... 뭔가 명확한 부분이 있는지 궁금합니다. 잘못하고있어. 이것은 제가 사용하는 튜토리얼에 대한 링크입니다 : http://www.smoothdivscroll.com/#howitworks 내 사이트에서 부드러운 스크롤 슬라이더를 작동시킬 수 없습니다.

머리 속에있는 데모에서 언급 된 최상위 코드를 사용합니다.

은 내가 슬라이더 "DIV"나는,이 슬라이더가 표시 할 곳이기 때문입니다. "

내가 플러그인 상당히 새로운 오전으로 표시 한 사업부 사이에 언급 된 두 번째 코드를 사용하지만

마지막으로, 이미 설정 한 CSS에서 마지막으로 언급 한 코드 (CSS)를 사용합니다. 작동하지 않으며 머리카락을 뽑아 내고 있습니다. 동일한 슬라이더를 사용하는 다른 사람들의 코드를 사용하지만 작동하지 않습니다.

제발, 필사적 이네!이 웹 사이트를 끝내야 해. (

출처

2012-08-18 user1607991

귀하의 코드를 보지 않고도 할 수있는 일이 많지 않습니다. – hsalama

해당 플러그인 요구 사항에는 [jQuery, jQueryUI, jQueryMouseWheel] (http://www.smoothdivscroll.com/dependencies.html) 라이브러리가 필요합니다. – Stano

부드러운 스크롤 플러그인의 경우이 기능이 완전히 작동합니다. demo page입니다. >Save Page As>Web Page Complete를 선택 메인 메뉴로 이동

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Smooth Div Scroll</title> 
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" /> 
<style type="text/css"> 
#scroller { 
    width:100%; 
    height: 330px; 
    position: relative; 
} 
#scroller div.scrollableArea img { 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 0; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> 
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script> 
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#scroller").smoothDivScroll({ 
     mousewheelScrolling: true, 
     manualContinuousScrolling: true, 
     visibleHotSpotBackgrounds: "always", 
     autoScrollingMode: "onstart" 
    }); 
    }); 
</script> 
</head> 

<body> 
    <div id="scroller"> 
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" /> 
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" /> 
    </div> 

</body> 
</html>

지금 브라우저 (파이어 폭스 나 크롬을 권장합니다 :))에서이 파일 demo.html을 엽니을 복사하고 컴퓨터에 demo.html으로 다음 HTML을 붙여 (demo2.html) 브라우저는 모든 의존성 (필요한 라이브러리)을 저장하고 로컬 하드 디스크의 모든 절대 링크를 상대 링크로 변환합니다. 나는 이것이 그것이 기능적으로 만드는 가장 쉬운 방법이라고 생각한다.

출처

2012-08-18 09:39:12 Stano

내 서버의 스크립트에 대한 핫 링크는 테스트 용으로 괜찮은 것 같지만 영구적 인 솔루션에는이 링크를 사용하지 마십시오.

zip with the latest version from GitHub을 다운로드 한 경우 클릭하여 곧바로 "즉시 사용할 수있는"테스트 페이지를 포함 시켰습니다. 데모를 로컬에서 실행하려는 경우 더 나은 솔루션입니다.

출처

2012-09-28 11:11:52 tkahn

내 사이트에서 부드러운 스크롤 슬라이더를 작동시킬 수 없습니다.

답변

관련 문제