javascript 狡猾的滚动Jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15480652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sly Scroller Jquery
提问by ekussberg
i would like to use following plugin http://darsa.in/sly/but i cant get it to work, here are some details to my code.
我想使用以下插件http://darsa.in/sly/但我无法让它工作，这里是我的代码的一些细节。
i have following HTML:
我有以下 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([email protected])"><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([email protected])"><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></a></li></ul>
</div>
</div>
and following JS:
和以下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');
});
});
But somehow Sly-Scroller doesn't work? Thanks for help!
但不知何故 Sly-Scroller 不起作用？感谢帮助！
回答by AndroidKrayze
First of all Load all the Scripts for SLY in the end of your body :
首先在你的身体的最后加载 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>
Then Call the HTML like this :
然后像这样调用 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>
回答by Nikhil Pingle
here you go! Credit goes to this blog writer...
干得好！归功于这位博客作者...
don't forget to click on "download", see more details there!
不要忘记点击“下载”，在那里查看更多详细信息！
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/
回答by Sendy
try this, its work for me
试试这个，它对我有用
$(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
});
});
