Sly Scroller Jquery

Question

我想使用下面的插件http://darsa.in/sly/但我無法得到它的工作，這裏是我的代碼的一些細節。

我具有以下HTML：

<div class="scroller"> 
    <div class="scrollbar"> 
     <div class="handle" style="-webkit-transform: translateZ(0px) translateX(0px);"></div> 
    </div> 

    <div class="sly" style="overflow: hidden;"> 
     <ul class="slidee" style="-webkit-transform: translateZ(0);"> 
      <li><a href="#" style="position: absolute;" rel="tooltip" data-original-title="kuskov(ekuskov@gmail.com)"><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></a></li> 
<li><a href="#" style="position: absolute;" rel="tooltip" data-original-title="kuskov(ekuskov@gmail.com)"><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></a></li></ul> 
    </div> 
</div> 

和以下JS：

$(document).find(".scroller").each(function (i, element) { 

var $cont = $(element), 
    $frame = $cont.find(".sly"), 
    $scrollbar = $cont.find(".scrollbar"); 

$frame.sly({ 
    // Sly type 
    horizontal: 1, // Change to horizontal direction. 
    itemNav: null, // Item navigation type. Can be: basic, smart, centered, forceCentered. 

    // Scrollbar 
    scrollBar:  $scrollbar, // Selector or DOM element for scrollbar container. 
    dragHandle: 0, // Whether the scrollbar handle should be dragable. 
    dynamicHandle: 0, // Scrollbar handle represents the relation between hidden and visible content. 
    minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels. 
    clickBar:  0, // Enable navigation by clicking on scrollbar. 
    syncFactor: 0.50, // Handle => SLIDEE sync factor. 0-1 floating point, where 1 = immediate, 0 = infinity. 
}); 
$frame.sly('reload'); 

}）;

但不知何故Sly-Scroller不起作用？感謝幫助！

Answer 1

首先負載對SLY所有的腳本在你的身體的結尾：

<script src="js/jquery.easing.js"></script> 
<script src="sly/horizontal.js"></script> 
<script src="http://darsa.in/sly/js/vendor/modernizr.js"></script> 
<script src="http://darsa.in/sly/js/sly.min.js" ></script> 

然後調用HTML這樣的：

   <div id="navigation"> 
       <div class="wrap"> 
        <h2>Video Playlist</h2> 
         <div class="scrollbar" style = "width:100%"> 
          <div class="handle"> 
           <div class="mousearea"></div> 
          </div> 
         </div> 

        <div class="frame " id="basic"> 
         <ul class="clearfix"> 
          <li> </li> 

         </ul> 
        </div> 

        <ul class="pages"></ul> 
      </div> 
     </div> 

Answer 2

在這裏你去！信貸去這個博客作家...

不要忘了點擊「下載」，看到更多的細節！

http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/

Answer 3

試試這個，它的工作對我來說

$(document).find('.row').each(function() { 
    var $slider = $(this).find('#contentSlider'); 
    var $wrap = $slider.parent(); 
    $slider.sly({ 
     horizontal: 1, 
     itemNav: 'basic', 
     smart: 1, 
     activateOn: 'click', 
     mouseDragging: 1, 
     touchDragging: 1, 
     releaseSwing: 1, 
     startAt: 1, 
     scrollBar: $wrap.find('.scrollbar'), 
     scrollBy: 1, 
     pagesBar: $wrap.find('.pages'), 
     activatePageOn: 'click', 
     speed: 300, 
     elasticBounds: 1, 
     easing: 'easeOutExpo', 
     dragHandle: 1, 
     dynamicHandle: 1, 
     clickBar: 1 
    }); 
});