Transition suggestions

[MarcusJT]

Awesome slider!

Would be even cooler if there were additional options to control...

1. the direction of the transitions (e.g. to allow selection of any possible directions for each one)
2. the number of tiles/slices used in a given transition (throttling this automagically would be fantastic but probably not doable)
3. the duration of each transition (currently hardcoded to 400ms?)

And simple vertical and horizontal 3d flip (i.e. rotation about the central axis) transitions would be great too.

[joelambert]

Hi Marcus,

Thanks for the suggestions. If I've understood you correctly then most of what you're asking for can already be achieved. I'll try answer your points in turn.

1. the direction of the transitions (e.g. to allow selection of any possible directions for each one)

Only some of the transitions currently support this but its possible that I will promote direction to a first class property. Here's an example however of how you can force direction on the cube transition using the next() api function:

myFlux.next('cube', {
    direction: 'right' // Supports 'up', 'down', 'left', 'right' for this transition
});

This isn't terribly clear from the documentation I know and I need to improve the comments in the source but it is possible :)

1. the number of tiles/slices used in a given transition (throttling this automagically would be fantastic but probably not doable)

You can use the above trick to also pass in the number of slices to use for each individual transition

myFlux.next('blocks2', {
    cols: 12,
    rows: 4
});

1. the duration of each transition (currently hardcoded to 400ms?)

The duration for each transition is actually not changeable at the moment as it depends on the number of slices etc that you set. You can however set the delay between transitions from the constructor.

I hope that helps? Sorry if there are any errors in the code, I'm not writing this on my own machine & don't have a means to test the snippets.

[MarcusJT]

Thanks for your prompt response Joe, will have a play! :)

PS - couldn't the duration per slice/chunk simply be calculated directly from the number of them and the specified duration?

[joelambert]

couldn't the duration per slice/chunk simply be calculated directly from the number of them and the specified duration?

I don't think its quite as simple as that as most of the effects involve elements that begin transitioning before the last element has finished.

I suspect that it could be worked out but it might involve quite a bit of change to the existing system

And simple vertical and horizontal 3d flip (i.e. rotation about the central axis) transitions would be great too.

I'll add this to the list and see if I can implement these at some point, unless you fancy adding them and making a pull request?

[MarcusJT]

Alas I haven't had a chance to work on my own site recently (e.g. to incorporate your plugin) so am unlikely to have time to implement those transitions myself any time soon, sorry... my suggestions aren't a high priority anyway, but I do think their inclusion would make your plugin even more versatile and well-rounded.

[Septican]

Hey,

i've have an issue with this transition direction also. I've tried to use the code u've suggested, but no luck.

Here is the code what i have in default:

            window.slider1 = new flux.slider('#slider1', {
                                          pagination: false,
                                          autoplay: false,
                                          transitions: [ 'cube' ]
                                      });

i've tried to add:

slider1.next('cube', { direction: 'right' });

i also use navigations with onlick:

onclick="window.slider1.next();return false;" onclick="window.slider1.prev();return false;"

What am i doing wrong? =/

[joelambert]

The next() & prev() functions hardcode the left & right directions respectively, if you want to achieve this type of behaviour you can use the showImage() function instead.

Here's an example: JSFiddle