Sly Scroller Jquery
12,064
Solution 1
First of all Load all the Scripts for SLY in the end of your body :
<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 :
<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>
Solution 2
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/
Related videos on Youtube
Author by
ekussberg
Entrepreneurship & Startups ERP Systems & E-Commerce Product management Process optimization Wordpress PHP, JS, jQuery, Node MySQL, MongoDB AWS, DigitalOcean, Docker
Updated on September 15, 2022Comments
-
ekussberg over 1 year
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.
i have following 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:
$(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!
-
Harry Moreno over 10 yearshave you wrapped your js in a
$(document).ready()
clause? that was my problem
-