i would like to use following plugin / 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"><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" ><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!

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"><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" ><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!

• javascript
• jquery
• scrollbar
• sly-scroller

• Can you link me to where you are using your code? Does the Javascript console show any errors? – howderek Commented Mar 18, 2013 at 15:43
• 1 have you wrapped your js in a $(document).ready() clause? that was my problem – Harry Moreno Commented Oct 1, 2013 at 20:06

3 Answers 3

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>

here you go! Credit goes to this blog writer...

don't forget to click on "download", see more details there!

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

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
    });
});