the gestures event not work on android,but work on iphone

but but the example is work fine on android,and support gestures.

is there any special code???

hijacking the first post Issue explained by @TechTowkay in a comment below.

Hi,

I saw in the properties of sly that is possible to set up the frame and slidee size with "sly.rel".

In my case I use sly to horizontally slide items. However, I have 3 items in height (3 rows of item with different width). So the width of the slidee and frame are false because they are calculated with all item width.

I want to set up manually.

But I really don't understand how to call the "sly.rel". I don't know how to write it. It's not clear in the documentation...

Loïc

After playing around with this library I found out that it had the same problem as all scrolling libraries have, it behaves completely different in some browsers and especially with macbook trackpads.

After playing around with the scrolling and attempting to fix it myself I found a working piece of code on stackoverflow (http://stackoverflow.com/a/13650579) which I've tested in IE9, IE10, latest Firefox, latest Chrome and in the latest Safari with a normal wheel-based mouse and a macbook trackpad. It works pretty well in my case, but it could still be that I messed something up as I only tested it in a item based slider and as a scrollbar replacement.

But hey, thought you might like it. And thanks for this amazing thing, sly is great!

When our li elements are a width of 150px with a padding of 6px the calculation for the ul width is not taking into account the padding so the last element was being pushed down to the next line instead of included in the scroll. We have adjusted our padding to resolve the calculation to make sure all the panes show up on the correct line but wanted to report this padding issue.

Hi there. I am using sly to move through a series of linked imags that are layed out horizontally using either gesture control or mouse scroll. I'd also like the user be able to use the left and right arrows to move through them, but it would seem as though I cannot do all three. i can only get the arrows to work on item based nag. here is my code :

        var leftArrow = $('span.options-right');
        var rightArrow = $('span.options-left');

        /* setup scrolling whenever the slider is loaded or updated */
        $('dd.frame').sly({
            horizontal: 1,
            speed: 200,
            itemNav: 'basic',
            scrollBy: 1,
            dragging: 1,
            mouseDragging: 1,
            nextPage: leftArrow,
            prevPage: rightArrow,
            moveBy: 200,
            easing: 'swing',
            swingSpeed: 0.2,
            keyboardNavBy: 'items'
        });

Can you see if I'm missing something obvious? Any help is appreciated. I have until July 12th to get this working.

Continuing from PR #57

Sly is scrolling the content by the same amount of pixels/items per one mousewheel event.

The problem number one is, that this event might be a concatenation of multiple events, if scrolling is happening too fast. This is reflected in event.wheelDelta property, which is multiplied by N, where N is the number of concatenated mousewheel events. At least that's how it works in like most of the world devices/browsers.

The detection of this concatenation is highly problematic, and at the moment I don't know about any 100% reliable way how to do that. Especially considering the inconsistency of this property across devices & browsers:

| | evt.wheelDelta | evt.detail | | --: | :-: | :-: | | Safari v5/OS X | 120 | 0 | | Safari v5/Win7 | 120 | 0 | | Chrome v11b/OS X | 3 | 0 | | Chrome v11b/Win7 | 120 | 0 | | IE9/Win7 | 120 | undefined | | Opera v11/OS X | 40 | -1 | | Opera v11/Win7 | 120 | -3 | | Firefox v4/OS X | undefined | -1 | | Firefox v4/Win7 | undefined | -3 |

Old ilustrational table of one scroll event 'up'. Copied from this stakcowerflow question.

I've tried to detect the base wheelDelta by doing modulus of wheelDelta and [120, 40, 3], but that is obviously not 100% reliable. That beign said, it worked in 99% of cases, except Macbook Trackpads (and potentially other similar devices).

Mackbook trackpad's mousewheel event reporting is something else. The base is 3, but it can go as high as 450+. That is probably because in Mackbooks, this property doesn't report a value that specifies a destination, but rather the scroll velocity that should be used to control the scrolling animation speed.

This breaks everything.

I had to revert my attempt to normalize this, because modulus base detection on Macbook would just result into a ridiculous scroll distance per one event. And there is no way around it.

So currently, Sly will move the content by set number of pixels/items per event, disregarding event concatenation altogether. This is still a problem in Mackbooks, as the mousewheel event triggered by trackpads has a very high frequency, which results into a really fast scrolling speed, inconsistent with other devices using mouse wheel.

Currently, I don't see any reasonable fix for this, and userAgent sniffing is not an option.

I guess we have to wait until browsers will decide to implement a more standardized wheel event. Currently, only FF and IE9 support it.

Hi, Is it possible to use Sly with JQuery's droppable and sortable? I need to drag and drop elements from one sly slider to another and vice versa.

Many thanks.

The user experience is greatly improved if the vertical scrolling is locked when you swipe / drag/ touch horizontally. It is frustrating that the page is moving unintentionally.

It is for instance done when using hammer.js see drag_block_horizontal: true

Not so much an issue, but you did say that you needed help testing the mobile issues.

I'm using a horizontal Sly with the mouse and I'm noticing that every once in a while my drags don't register. I will try to drag the slider to the left but nothing happens. I happens about one in five drags or so. Enough to become annoying after a while.

I traced this down to a fragment of code inside function dragHandler:

if (!dragging.init) {
    // I found that the test below prevents drags from starting when the initial move
    // was in the 'wrong' direction... I may be spastic but for me that happened a lot.
    // It was an annoyance that did not help me so I turned it off. -Stijn
    //if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
        dragging.init = 1;
    //} else {
    //    return dragEnd();
    //}
}

The test in there was probably added for a good reason, but I have not found any side-effects from disabling it and it does fix my problem...

Why is that test there? If I disable it like this will it hurt?

Thanks for building a great scroller!

I want to get the number of pixels the scroll bar has been scrolled.

For example, initially the CSS of the slidee shows this:

style="transform: translateZ(0px) translateY(0px)"

Now, when I scroll a little, it changes to:

style="transform: translateZ(0px) translateY(-113px)"

The -113 is the value I want to be able to get programmatically.

How can I do this?

I am trying to create a commenting application and for that I need to create a surface where I want to append multiple contentEditable div elements.

For this, I am using item based navigation. I am adding multiple contentEditable div elements to the slidee with the add method. I've also setup a timer to update (reload) the scrollbar every some milliseconds. Up to this point everything works fine.

Now, when I start writing into the contentEditable div and as I add more lines to it, the Sly scroll system does NOT update correctly. Although it does update, but somehow it calculates the changing height of the elements incorrectly.

For example, let's say I add a div to the slidee, and then I add two more div elements. Now, in the first div I write something like: "Good article" Then, in the third div, I write a longer comment that spans multiple lines. At this point, Sly LOSES the first div -- it does NOT scroll back up to the first div.

The jsFiddle explaining the problem is this: http://jsfiddle.net/ywDfG/4/

You should reproduce the problem like this:

First, make big space for the "result" section, i.e., completely narrow the JavaScript and HTML sections, so that you get the full width for the actual generated page.

Now add a div with the "add" button, and write something like "first" in it to demarcate it as the first element. Now hit "add" button multiple times to add a bunch of more contentEditable elements. Note that scrollbar updates automatically.

After this, go to the last added div and write a bunch of lines in this... add some line breaks so that we have multiple lines.

At this point, scroll up and try to go to the first div. You won't be able to go to the first div -- it's gone. The scrollbar does not show it. In general, the problem is that the more we write into some contentEditable div, the div elements ABOVE it start getting lost. They aren't gone frome the DOM -- but the scrollbar does NOT take us to them.

I hope you'll be able to reproduce the problem easily. Just play with that jsFiddle, add a bunch of contentEditable div elements and write some content into them -- you'll see the problem.

So, once you see the problem -- please debug it as soon as possible as I am depending on this library.

I think the general problem here is that if the content inside the slidee of in the items (in the item based) changes dynamically, Sly does not correctly calculate the changed dimensions on reload.

Hello,

I think sly.js is worried about calculating the to give the exact number.

I currently have a pagination with 12 elements.

• On desktop, I have 6 dots.
• When I refresh in responsive I have 12 ....

I don't understand where this bug is coming from, does anyone have a lead ?

var $sliderCards = $('.slider-cards'), $scrollbar = $('.scrollbar'); $sliderCards.sly({ horizontal: 1, itemNav: 'basic', //itemNav: 'forceCentered', activateMiddle: true, activateOn: 'click', mouseDragging: 1, touchDragging: 1, releaseSwing: 1, startAt: 0, scrollBar: $scrollbar, scrollBy: 0, speed: 400, swingSpeed: 0.1, activeClass: 'visible', //elasticBounds: 1, pagesBar: $(".slider-cards .pagination"), activatePageOn: 'click', pageBuilder: function (index) { return '<li data-slide="' + (index + 1) + '"></li>'; }, dragHandle: 1, dynamicHandle: 1, clickBar: 1, nextPage: '.slider-cards .next', prevPage: '.slider-cards .prev', //moveBy: 400, });

Thank you

Hi, I am implementing this carousel using sly joomla plugin, but the issue I cannot find the way to add big chevron expand arrow on the left and right of the carouel. Similar to the arrow icon in the screenshot below.

Hello, I seek at the end of the scrolling of a page to recover the index of the current page on which is positioned the slider to trigger integrate additional nodes of the node of the visible page (in one item per frame mode). I use the moveEnd callback in which I get the activePage property from rel property. But I notice that the moveEnd method is called 2 times for each swipe! Have you noticed this bug and have you possibly got a fix?