This plugin provides a simple way to make navigation circular.
Options
name | description | default |
---|---|---|
autoPlay | Allows your track to foward one page by 'duration option' time. It automatically disabled when mouse is over the track. | false |
duration | time to auto play in milliseconds | 3000 |
clonedClass | Class applied to the cloned items that makes track circular | "cloned" |
Installation
Circular Navigator Plugin requires the Navigator Plugin
track.install(new SilverTrack.Plugins.Navigator({
prev: $(".my-track a.prev"),
next: $(".my-track a.next")
}));
track.install(new SilverTrack.Plugins.CircularNavigator());
Give life to your track
In this way, autoplay allows your track to foward one page by 'duration option' time. It automatically disabled when mouse is over the track.
track.install(new SilverTrack.Plugins.Navigator({
prev: $(".my-track a.prev"),
next: $(".my-track a.next")
}));
track.install(new SilverTrack.Plugins.CircularNavigator({
autoPlay: true,
duration: 5 * 1000 // 5s
}));
Connect with Bullet Navigator Plugin
In this way, you can easily control pages and be aware of which is the current page.
track.install(new SilverTrack.Plugins.Navigator({
prev: $("a.prev", container),
next: $("a.next", container)
}));
track.install(new SilverTrack.Plugins.Css3Animation());
track.install(new SilverTrack.Plugins.CircularNavigator({
autoPlay: true,
duration: 5000
}));
track.install(new SilverTrack.Plugins.BulletNavigator({
container: $(".bullet-pagination")
}));