Wink toolkit - Discussion

May 25, 2011 at 2:05 pm #link

Misfit

Hi!

I’m thinking of using the Wink carousel for a web project I’m workling on.

Can I make the carousel scale images? I want the center image to scale up a bit.

Can I make the carousel infinite? I don’t want it to stop at the first and last images. Just go round and round.

thx for any help

Regars M

May 26, 2011 at 11:21 am #link

gsb

This is doable depending on your level of programming expertise for you would need to change and/or extend the current carousel widget.

For example, instead of reversing the car carousel when it reaches one end or the other, you could take a node off the opposite end and append/pre-append it to the other.

Scaling and other changes will again require some thoughtful coding I believe.

Greg

June 11, 2011 at 9:25 am #link

Misfit

Cool! I’m not a great fan of javascript, but I have quite a lot of programming experience so hopefully I’ll be fine

or not… Started looking at it yesterday and didn’t really know what I needed to do. So was hoping you could point me in the right direction!

Tried to add and remove items/nodes after the carousel was created and that didn’t really work out. Is it even possible to do?

Can I add the infinite thing (go round and round) editing only the carousel.js file or do I need to change stuff some place else?

Thx for any help!

/M

June 11, 2011 at 12:50 pm #link

gsb

It is not a great idea to change the wink elements directly; for one, it is difficult to upgrade to stay in-sync as wink advances. However, that is less difficult sometimes and perhaps an ok place for you to start.

The carousel’s “auto mode” uses the private method ‘_startAutoPlay’. To continuously cycle, you can replace this whole method with this line of code:

_startAutoPlay: function()
{
    this.goToItem( (
        this._currentItemIndex =
            ( ++this._currentItemIndex +
            this._itemsList.length ) % this._itemsList.length
    ) );
},

An approach to enlarge the ‘centered’ panel is not much more difficult. Good luck.

Greg

June 11, 2011 at 1:25 pm #link

Misfit

Nice! Thx for the quick answer.

However this is not exactly what I had in mind. What I want to do is show the first node right after the last one. If I for example have 3 nodes I want it to show 1, 2, 3, 1, 2, 3,… and so on. And if I show 3 items all the time and start with 1, I will show 1 in the middle and node3 to the left and node2 to the right. Still think that’s possible by just editing the carousel.js?

Lol, hope I’m not to much of an pain in the…

/M

June 11, 2011 at 2:23 pm #link

gsb

Oh well. Sorry that it did not help.

Greg

June 12, 2011 at 12:35 pm #link

Misfit

No problem! Thx again for trying

Perhaps admin or someone else can throw in a quick answer to: “Is this even possible?”

Havn’t found any other carousel, with the continuous functionality I need, that looks and feels as good as wink. Anyone know of any?

/M

June 14, 2011 at 6:37 am #link

admin

Hi,

Yes, it is possible, but you will definetly have to modify the carousel or extend it.

Here is a good place to start:

http://www.winktoolkit.org/webapps/samples/carousel.js

(just replace the existing carousel.js file by this one and launch the test page)

As you will see, depending on the width of your carousel it may or may not be the good solution but it could at least help you get started.

Jérôme

June 14, 2011 at 8:22 am #link

Misfit

Nice! Very nice indeed! Ty so much

Got 9 items in my Carousel now and it works great! Will continue working on my project today. I’ll post any smart finds here later.

Thx again!

June 14, 2011 at 8:18 pm #link

Misfit

Been working on it all day now and I must say it’s just what I needed. Very nice

Found one strange thing with this new script that I can’t really find an explanation for. On iPhone 4 the script takes some extra time on the first switch. Everything gets loaded but the first switch (from 1 to 2 or whatever) takes 1-2 sec. After the first switch everything runs smoothly. It’s like a small hickup I don’t see this on Android. Tried on both 2.2 and 2.3 and all switch transitions including the first are the same.

Any idea what might cause this? Also the hickup time increases when I add more items. 10 items is like 1-2 sec and 30 is 2-3.5 sec.

Got me really puzzled this one :p Would be nice to know if anyone seen this befor.

/M

June 15, 2011 at 8:22 am #link

Misfit

Found a quick fix for the iPhone delay problem. I start the carousel at the index I want +1. Then go one step left at the end of the init(). The step left wakes up the carousel befor everything get loaded and when the pages is loaded everything works great

It’s not pretty but it works!

/M

June 15, 2011 at 8:25 am #link

Misfit

Also I made a kinda nice (for mobile) 3d style carousel using two of this circular ones. One big infront of a smaller one. The one in the back goes in the oposite direction of the front one. Makes a kinda nice effect and it so much faster than any other mobile carousel!

June 15, 2011 at 9:10 am #link

admin

Glad you found a solution

That’s a good idea, I had never thought of putting 2 carousels to build a 3d effect.

Jérôme

July 30, 2012 at 10:24 pm #link

Rod

Hi,

Sorry to re-open this thread, but the link you mentioned http://www.winktoolkit.org/webapps/samples/carousel.js
isn’t working any more. Do you have any example of infinite carousel online ?
Thanks
Rod

July 31, 2012 at 6:05 am #link

admin

Hi,

Thanks for notifying us We are currently working on an infinite carousel for the next Wink release.

Jérôme

discussion

Extend carousel