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

[vcode]

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]

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]

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]

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]

$('#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]

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]

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]

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]

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]

you can use trace instead console.log

[juan...@gmail.com]

NOTE: this activeItem property only works when itemNav: 'forceCentered', not in 'basic'.

[Sly.js]

Well, no. activeItem is always an index of an active item in all item based navigation modes ('itemNav' other than null).

[Sly.js]

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]

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]

Thank you very much!