how to get the index (or some element from the slider)??

3176 views
Skip to first unread message

vcode

unread,
Aug 31, 2013, 5:33:46 PM8/31/13
to sly...@googlegroups.com
Hi all,

how can i get the index of the active element when i press one button?

i'm not sure how to implement sly.getIndex( item );

Regards

Sly.js

unread,
Aug 31, 2013, 6:14:16 PM8/31/13
to sly...@googlegroups.com
sly.rel.activeItem has the index of current active item. To see other Sly properties, visit the properties documentation page: https://github.com/Darsain/sly/wiki/Properties

Also, event 'active' receives the index of just activated item as its 2nd argument. Again, all events and how to use them is documented in the events documentation page: https://github.com/Darsain/sly/wiki/Events

sebas...@gmail.com

unread,
Sep 1, 2013, 3:32:15 PM9/1/13
to sly...@googlegroups.com
I read all documentation a lot of times but i'm so confused...

i call sly like this..

<script type="text/javascript">

$(document).ready(function(){

'use strict';

(function () {
var $frame = $('#frame-fleet');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();

// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 1000,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,

// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});



$('#select-ship').on('click', function () {


var position = $frame.sly.rel.activeItem;
alert (position);

});
}());

});
</script>

the sly works great, but i'm going crazy to take out the index of the active item

regards

Sly.js

unread,
Sep 1, 2013, 4:07:40 PM9/1/13
to sly...@googlegroups.com
Here is the documentation specifying different ways how to initiate Sly, one of which lets you save the Sly object: https://github.com/Darsain/sly/wiki/Calling

You are initiating Sly via a jQuery proxy, which is there for quick and simple use cases. If you need to work with the API, using jQuery proxy is like shooting yourself in the foot.

sebas...@gmail.com

unread,
Sep 1, 2013, 6:17:58 PM9/1/13
to sly...@googlegroups.com
$('#select-ship').on('click', function () {


var position = $frame.sly.rel.activeItem;
alert (position);

});

on this way nothing goes to var position.

Please, you have a lot of documentation, i read and read but if the solution it's there, i can not find it.

it's so hard to you write 2 code lines to help me?.

I think it's easy to solve, but i can't do it myself.

Thank you.

Sly.js

unread,
Sep 1, 2013, 6:35:20 PM9/1/13
to sly...@googlegroups.com
I'd be just quoting the calling documentation, but all right than...

When you want to have a direct access to all methods, properties, and have a complete control over Sly:

var sly = new Sly( frame, options [, callbackMap ] ).init();

`sly` is now an initiated Sly object with direct access to all Sly properties and methods. You need this to access the `rel` object, like this:

sly.rel.activeItem

In your case, $frame is a jQuery object with frame element in it. That has nothing to do with Sly. `$frame.sly` executes the jQuery.fn.sly proxy (shorthand/plugin, whatever) used to initiate Sly for people that don't want to bother with real JavaScript, and do everything via a jQuery. So in your case, `$frame.sly` is a function, and `$frame.sly.rel` is undefined.

You don't have a direct access to Sly object when initiating via a jQuery proxy. You have to initiate with `new Sly()` constructor, and save the new Sly instance that it returns. (don't forget to .init() the instance).

It is all documented.

sebas...@gmail.com

unread,
Sep 1, 2013, 7:02:27 PM9/1/13
to sly...@googlegroups.com
i step up !!

this works

$frame.sly('on', 'active', function () {console.log( $frame.sly('rel.activeItem') )});

that shows me on the console log an array

but now i need to put the current index on a var

i keep trying

sebas...@gmail.com

unread,
Sep 2, 2013, 2:01:20 PM9/2/13
to sly...@googlegroups.com
ok, but y try to init a new Sly() like this

<script type="text/javascript">

$(document).ready(function(){


var sly = new Sly("#marco-nave",

{
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 1000,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,

// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')

}).init();
});
</script>

but the result is an dead frame,:-(

where is the mistake? i'm going crazyyyy

sebas...@gmail.com

unread,
Sep 3, 2013, 1:40:04 PM9/3/13
to sly...@googlegroups.com
Ok, finally found the problem. All were syntax mistakes like )} and this stuff.

I init all to take and use all the Sly powerful

I hope this helps to people....

--------------------------------------------------


$(document).ready(function(){

var sly = new Sly('#marco-nave',
{
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,

scrollBar: $('#marco-nave').find('.scrollbar'),


scrollBy: 1,
speed: 1000,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,

// Buttons
prev: $('#prev'),
next: $('#next')
});

sly.init();

sly.on('change', function (eventName) {

console.log(eventName); //
console.log(this.rel.activeItem);
});

});
--------------------------------

sebas...@gmail.com

unread,
Sep 3, 2013, 1:42:06 PM9/3/13
to sly...@googlegroups.com
you can use trace instead console.log

juan...@gmail.com

unread,
Jan 20, 2014, 5:06:07 PM1/20/14
to sly...@googlegroups.com
NOTE: this activeItem property only works when itemNav: 'forceCentered', not in 'basic'.

Sly.js

unread,
Jan 21, 2014, 3:54:37 AM1/21/14
to sly...@googlegroups.com
Well, no. activeItem is always an index of an active item in all item based navigation modes ('itemNav' other than null).

Sly.js

unread,
Jan 21, 2014, 4:00:33 AM1/21/14
to sly...@googlegroups.com
But you may be confused as to what activeItem is. Active item is an item that receives the activeClass, upon activation triggers the "active" event, and is regarded as being in "active" state. In basic navigation, this item can be positioned everywhere. In smart navigation it is within the visible frame, or again anywhere where user navigates manually. And in forceCentered mode it is always in the middle.

If you want an index of an item that is currently in the middle of a visible frame, you'd use rel.centerItem.

san...@gmail.com

unread,
Apr 11, 2016, 5:40:11 PM4/11/16
to Sly.js, sebas...@gmail.com
Hi Sebas, you must add arguments to the function (the lazy documentation (https://github.com/darsain/sly/blob/master/docs/Events.md#active), but is not like "shooting yourself in the foot" really.

$frame.sly('on', 'active', function (eventName,itemindex) {console.log("position is: "+itemindex);});

zuluvi...@gmail.com

unread,
Mar 5, 2017, 1:57:44 AM3/5/17
to Sly.js, sebas...@gmail.com
Thank you very much!
Reply all
Reply to author
Forward
0 new messages