Let's setup a track with the navigator plugin. We will use a very simple markup, SilverTrack receives a container with your items, in our case, '.slider-container' and it leaves up to you to control the view port, so we will use '.view-port' to control de visibility. It also requires 'position: absolute' of your items
<div class="track my-track">
<!-- SilverTrack requires only this part -->
<div class="view-port">
<div class="slider-container">
<div class="item"><img src="http://lorempixel.com/230/134/nature/1/"></div>
<div class="item"><img src="http://lorempixel.com/230/134/nature/2/"></div>
<!-- ... -->
</div>
</div>
<!-- My custom navigator links -->
<div class="pagination">
<a href="#" class="prev disabled"></a>
<a href="#" class="next disabled"></a>
</div>
</div>.view-port {
width: 960px;
overflow: hidden;
position: relative;
}
.slider-container {
position: relative;
height: 138px;
margin: 0;
padding: 0;
}
.item {
position: absolute;
width: 234px;
height: 138px;
margin-right: 8px
}After the minimum markup and css we will create our track.
var container = $(".my-track");
var track = container.find(".slider-container").silverTrack();
// install the plugins you want, in our case Navigator
track.install(new SilverTrack.Plugins.Navigator({
prev: $("a.prev", container),
next: $("a.next", container)
}));
track.start();and it's done!
actually we add some css for the pagination arrows...
To improve the performance of the animations try the css3 animation plugin.
To learn how to use the other plugins, create your own plugin, use the SilverTrack Recipes to improve the creation of multiple tracks and for a more advanced use (options, methods, callbacks, etc) take a look at the menu.