Hi!

Great plugin.
I am trying however, to put next&prev buttons on the sides of the slider. for that I am using float.
When loading the page, I get a message that the plugin is irresponsive.

Any idea how can I achieve that? I tried also using table instead of float

Well i'm executing this code on the left navigation arrow click to make a loop.

jQuery("#list li:first").before(jQuery("#list li:last"));

reload() function does not handle the change well (it misses the change).
Can you give me a hint?

P.S.: when i hit left arrow it should go 1 step from the ACTIVE element. But it has some different logics

use this script is very complicated.
the official page with examples is not easy because there is other external .js (main.js and others file) needed to let it works.

with this markup (copied from here https://github.com/Darsain/sly/wiki/Markup )

div id="frame">
ul class="slidee">
li>/li> // Item
li>/li> // Item
li>/li> // Item
/ul>
/div>

And with the code copied from here (http://darsa.in/sly/#!horizontal)

script>
$frame.sly({
horizontal: 1,
itemNav: "basic",
dragHandle: 1,
dynamicHandle: 1,
dragContent: 1,
scrollBy: 1,
speed: 300,
cycleBy: 'pages',
cycleInterval: 1000,
startPaused: 1
});
/script>

THE SLY SCRIPT DONT WORK

I have a problem when setting the slide li width to the same as the frame width.

I want to do this because I want show an item as a full page.

The problem is that unless I am very careful when I drag, the page will drop back to the beginning li.

How can I avoid this?

A simple click to an item make start drag, you need to click second time to stop drag.

I would like to change the scrollbar style. How could i do that? Thanks

When clicking on next/previous buttons, if you go to a hidden item the list should follow the items.

Hello,

Thanks for this great plugin. It would be the perfect solution for all my scrolling/sliding needs if it supported a "fade" transition between slides, or the ability to create custom ones.

I understand Sly is for scrolling content, but I was wondering if that was possible somehow.

Keep up the great work!

I got your latest version from github RAW and got the following errors:
Firefox 17:
TypeError: b is undefined
[Break On This Error]

...f(b.pagesBar),N=0,u=[],Y="smart"===b.itemNav,B="forceCentered"===b.itemNav,F="ce...

Chrome:
Uncaught TypeError: Cannot read property 'scrollBar' of undefined sly.js:5
S sly.js:5
(anonymous function) sly.js:20
e.extend.each jquery.js:2
e.fn.e.each jquery.js:2
f.fn.(anonymous function) sly.js:19
(anonymous function)

Cheers

Hi,
I am using the last version Sly 1.0.0 23rd Mar 2013, I thought he had solved but the event click in browser of the mobile not working.

Just to let you know that the demo which contains transformation on the slides is broken in IE10

Here is the image is case you can't test on IE10

i just downloaded the lastest version from 19 h ago.
there is a js error:
TypeError: $handle.on is not a function
at
$handle.on(dragInitEvents, { source: 'handle' }, dragInit); //jquery.sly.js (row 1648)

When first load page or press Ctrl+F5 (or other keys for refresh page without cache) slider shows 1 element of "ul", but not all.

I see in firebug when bug is coming and said that elements are under each other but not each other.

You can to see this bug on mu development server here: http://webtux.net.fozzyhost.com/projects/fotograf/

There is bug with scrollbar. If you scroll to last item and delete all of them. Screenshot http://pix.am/HKkv/

If #frame is into hidden div (style="display:none") it not add item to the #frame.
if show on load page, frame has all items and can scroll.

First of all, awesome plugin Does exactly what I need, but for one thing (Maybe I am doing something wrong...)

On mobile (ios for now) I have a menu with 5 items. Each item contains a unordered list of about 20 links...So, the user would need to be able to scroll up and down to scroll through that list. However, I am not able to do so. Is that by design, Or did I mess something up in my CSS?

Thanks!
Marco

It seems like 'add' function is not working in IE 8

I can see the following error: Unable to get property 'el' of undefined or null reference

it shows up in this line of code:

$element.insertBefore(items[index].el);

If you delete all items on the list, if you try to add to a empty list you can't.

So I noticed that when dragging is enabled you lose the ability to enter an input field, or use a select field. Checkboxes do still work though.

I'm assuming this is to do with a prevent default call in the script.

Not sure if there is a way round it..?

I would like to be able to make a loop. Ie infinite scroll left. Infinete scroll right. With the same elements appearing.

Scroll content by touch events (ontouchstart, ontouchmove, etc) on mobile-devices (iOS, Android, etc).

I am creating a responsive layout where on smaller screens, I have Sly scroll single column layouts horizontally. However, on bigger screens, I split these single columns into two columns using CSS3. I would like to override the default snapping so that it snaps to each of those columns in the double column layout, instead of both of them.

http://jsfiddle.net/KgCC4/

Tried viewing this in IE7/8 on jsfiddle but jsfiddle isn't IE7/8 friendly...? Works fine in the browsers I'd expect it to though.

Also, if i turn off the scroll bar option, the sliding function works just fine.

I am testing this through IE9 using developer modes.

Also here is the link in full: http://dev.max-applin.co.uk/yogaclicks/style-finder.php

Thanks

I have a list with vertical scroll, dragHandle enabled and an event when click over an element.

I had to change the code in the function dragHandler in the last dragging.released if to force trigger the click event of the source element if the drag path is less than 50:

if(Math.abs(dragging.path) <= (dragging.touch ? 50 : 10)) {
dragging.$source.trigger('click');
}

Otherwise the element doesn't activate.

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

Would you help me, I have collapsable div in my layout when it is closed sly scrollbar width is 90% of the contaoiner and when it is opened scrollbar width should be 60%. How can i achive this?

There's a situation where i want horizontal scrolling to behave native (similar to overflow-x: scroll), instead of snapping to slidee items.

However, the scrolling looks a bit strange, i think it's a combination of both the easing animation and the lack of scroll velocity.

This plugin appears to calculate velocity quite nicely. Is there any chance of incorporating it into Sly?

http://brandonaaron.net/code/mousewheel/demos

Is there anyway can have multiple rows on sliders?

Alternatively, is there anyway can link the touchdrag/nav items to move all rows?

I am trying to use sly, in horizontal, and am trying (without luck) to get it to be based on % instead of a set width, so that it would adapt to tablet or phone.

Not sure how to go about doing it, I have the container & slyWrap at 100%, but when I change the UL/li's to 100% everything gets mucked up. I figured that if the UL and everything else were 100%, and I set the four li's to 25% it would work, but that also doesn't.

Any idea's? I didn't find a forum or anything so posted this hear, sorry if the wrong spot.

When you move slides using mouse scroll, the navigation based on 'active' class doesn't respond to the current slider position.
It means that when you scroll by few elements, and then click on the 'next page' button, the slider goes all the way to the beginning of the slider.

The bottom part of the text is cut off in each browser, and in IE8 the scrollbar does not move.

Looks like it works in Chrome so I presume it was tested in Webkit only.

I am making each image in the slidee equal the full width of the browser window so that the image goes end to end regardless of the window width with this:

var bodyWidth = $(document).width();
    $('#frame, .slidee img').css('width', bodyWidth);

everything works great except anytime I drag the handle close to any of the active change points from the left, it snaps back to the first slide. However, if I drag the handle a little past them slides back from the right to the closest point. Is there anything I need to add to compensate for the full width so that it will snap to the point from both left and right?

So far I've found sly a wonderful plugin, but I have one small issue. I use it on single-element pages almost exclusively. This means that the FRAME item is alway the exact same size as the LI item in the SLIDEE. All LI elements are the same size. These are all horizontally scrolling item-based slidees. Paging with buttons or the mousewheel works perfectly, as expected. Dragging with the mouse or even by touching on a touchscreen is buggy however.

If I do the dragging carefully enough, I am able to slide the list page by page (in this case this also means item by item). But more than often I only do a short dragging movement, and in this case the SLIDEE quickly scrolls back to the first element. Sometimes I can reproduce this by dragging at various speeds and lengths (sometimes releasing the click outside the box does this).

For testing purposes I resized my LI elements to 50% so that two of them fit into the FRAME side by side. This is not a good solution for me, but the bug completely disappeared.

I tried tinkering with the widths (I use widths in pixels and no padding or margin whatsoever), with no avail. The LI elements each contain one image only. I tried to attach an event handler to the moveEnd, and set the active element to the currently visible element, thinking that that caused an error (by default, the first LI element stays active until I click on the currently visible element intentionally).

I just install your jquery plugin and it works great.
However I observe that on my ipad, I can't click on an item. I can't move the scroller by clicking on an item. It only works by finger movements and with the "prev" and "next" buttons.

Maybe I miss an option in the doc.

I also notice that is not completely smooth on mobile device. Maybe because of a lake of blur motion effect, I think.

I've got an other question out of topic... Is it possible to set up the force position item (forceCentered) to force left position for example?

You made an awsome job (I search 3 hours before to find your perfect scroller!!).

Thanks

PS : Sorry for my English, I'm French

Loïc

When i click on navigation, scroll don't work.
Navigation consist of <li><a href="#">some text</a></li>
After "<li>" i need add space, for works text-align: justify. Without space slider work correct.

Do you have any sort of tutorial for it? I tried to use it from scrap in a project, but I can't get it to work. Any ideas?
All I have is a container div, with a buch of p tags inside of it. How can I put a scroll in the div?

Hi, I'd like to try sly without any snapping - itemNav:null seems to be mentioned as default in some places, but doesn't work - has this been changed?

If you pull the page for the slider up or down the page does not scroll. How to make so that the page can scroll when it is pulling the slider?

Hi,
I have a strange behavior when to set this array of options, no special items just simple html like in http://darsa.in/sly/#!vertical

$("#frame").sly({
  scrollBy: 35,
  dragging: 1,
  dragHandle: 1,
  dynamicHandle: 1,
  elasticBounds: 1,
  speed: 500
});

with speed: 500 drag is smooth but classic scroll is strange(based on scrollBy)
with no speed set (speed: 0) drag without animation is strange but classic scroll is fine

is it possible to have different speed/animation like scrollSpeed & dragSpeed?

I observed that the destroy method, create an huge bug on touch devices (observed on ipad and iphone).
After called sly.destroy();some div container inside the slidee frame break.
There are some display bugs like this:

I found the way to correct it on ipad and iphone (maybe for all touch device).

I observed, when destroy method is called, slidee container have -webkit-transform: none; . Set webkit transform to none create this display bug on touch device.

By overwritting none value after destroy method by $('.slidee').css('-webkit-transform', 'translate3d(0,0,0)'); it resolves the problem.

Jquery sly is a very great plugin but it still have some bugs that makes it unusable on touch device.

There is also a big problem with the click event on touch device. For example, with touchDragging: 0,, css3 transformation are executed twice. One time, just 0.1s approximatly, and an other time ( full animation time set up in css3). And, if I click a link on this hovered element the css3 transform animation is again launch 2 times.

If you need someone to test new functionalities or corrections on touch device, you can contact me.I would be glad to test it.

Sorry for my English, I'm French.

Good evening.
I find that I have to click somewhere on sly to active keyboard navigation.
How can I enable keyboard navigation from the beginning when the page has loaded?

since the last commit it seems that easing is not working and there is no animation whether you scroll or move using navigation

Hi,

I use sly to scroll horizontally a div.
I set up sly with non item based navigation.

My content inside SLIDEE container is responsive. So when the window browser is resized, I calculate the new width of SLIDEE. Then I update sly.

However, it don't work correctly. I can saw that the sly is updated but if the windows browser is quickly resized, the sly update seems to not work properly. If I slowly resize the windows broser, sly get the correct container width and everything works fine.

By the way, if I don't set SLIDEE width, the behaviour is the same. Because my container have a defined width on resizing.

Firefox/19.0 send two event on scroll mouse

event.type = DOMMouseScroll
event.timeStamp = 46159869

and

event.type = mousewheel
event.timeStamp = 46159869

Fix:

$scrollSource.on('DOMMouseScroll.' + namespace + ' mousewheel.' + namespace, function (event) {
// If there is no scrolling to be done, leave the default event alone
if (pos.start === pos.end) {
return;
}
// add this
if ($frame.data('scroling-timeStamp') === event.timeStamp) {
return;
}
$frame.data('scroling-timeStamp', event.timeStamp);

Sly doesn't work well on RTL (right-to-left) layouts (which is used by languages such as Hebrew, Arabic and Farsi).

On RTL layouts, you'd want the firstitem to be the rightmost, not the leftmost, and sly starts with the last (ie. leftmost) element in view.

Furthermore, the pager is mirrored, so it looks rather odd.

Mouse wheel or touchpad: Scroll from first to last item without stopping (steps).

I'm trying to design a responsive image gallery using Sly that (ideally) lazyloads the images.

The first issue I've stumbled across is that Chrome doesnt always load the images (or wrapper?) properly. If we just refresh the browser it continues with the display problem but if we reload (address bar) its works again. Looks like images are still being placed below each other (vertically) and not floating left as they should. Any ideas on how to resolve this?

My test for that is here:
http://test.factoryhouse.org/2013.04_horizontal-scroll_003/

Second issue is how would I make images to lazyload in this situation?
http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html

My test so far:
http://test.factoryhouse.org/2013.04_sly-lazyload/

I think this is also a forced float: clear somewhere. Because when you resize the browser in order to accommodate more images at once they immediately lazyload - as if they now had enough space to float. However the moment you scroll nothing else happens.

I would really appreciate for some guidance on this, cheers!

In infinite scrolling when I drag the slider to the end cause error in auto-complete.

Prev & Next methods should be rather named PrevItem & NextItem, where the current names should be an alias for the current scrolling functionality (animate SLIDEE by X items/pixels).

I stumbled accross an issue and wonder if you can help
I have 2 slides
each with form in it
forms have dropdown select boxes
I have disabled drug and all fields in both forms are working except for dropdown box in Firefox. It works fine in Chrome and IE9
On the fist slide -> first form select dropdown works fine on a next slide, slide 2 -> dropdown select field can be clicked but not slected
to trouble shoot I swaped slide 1 and 2 places and result was the same on the first slide dropdown works on the second slide it doesn't. Now I know it's not an html code, but I don't know what else it can be?