2014-02-24 2 views
0

goog.fx.dom.Slide 함수를 사용하여 Closure로 콘텐츠 슬라이더를 구현하려고합니다. 아이디어는 컨테이너 div의 아래쪽에 슬라이드 막대를 드래그하여 슬라이더가 사용자에 의해 이동 될 때 컨테이너 div를 슬라이드시킬 수있게하는 것입니다. 현재 설정으로 콘솔에 오류가 표시되지 않지만 컨테이너 div가 아무 곳으로나 이동하지 않습니다.클로저가있는 슬라이더 만들기

HTML : (작동 슬라이더에 클릭에서 해고)

<div id="sliderContainer"> 
<div id="slider"> 
    <div id="s-h"> 
     <div class="sliderBox"></div> 
     ... 
     <div class="sliderBox"></div> 
    </div> 
</div> 

JS. A와 B는 대상 값입니다 (예를 들어, 100, 0, 난 단지 가로 스크롤이 필요하기 때문에) :

function slide(a, b) { 
    // a and b are coordinates provided b 
    var el = document.getElementById('s-h'); 
    var duration = 1000; 
    var x = el.offsetLeft; 
    var y = 0; 
    var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,goog.fx.easing.easeOut); 
    anim.play();} 

어떤 조언을하거나, 분명히 뭔가 잘못을?

+1

이 찾고있는 추가하려면? - http://closure-library.googlecode.com/git-history/e26392235d9120d8b63eb6a59465fc4462d493e9/closure/goog/demos/slider.html – dekdev

답변

0
require('goog.ui.Slider'); 

// 나중에

var slider = new goog.ui.Slider(); 
slider.render(); 

//하지만 당신은 또한이가 CSS를

.goog-slider-thumb { 
    top: 0; 
    width: 20px; 
    height: 100%; 
    position: absolute; 
    /* background image */ 
} 

.goog-slider-horizontal { 
    width: 200px; 
    height: 20px; 
    /* color, etc... */ 
}