The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript AnythingSlider – Moving caption location Re: AnythingSlider – Moving caption location


You will need to include the “appendControlsTo” option and target an element above the slider. Since the controls are now outside of the slider, you’ll also need to apply custom css to it (demo):



var updateCaption = function(slider){
var cap = slider.$currentPage

stopAtEnd: true,
autoPlay : false,
infiniteSlides: false,
appendControlsTo: $('#nav'),

// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {


// Callback before slide animates
onSlideBegin: function(e, slider) {

// Callback when slide completes - no event variable!
onSlideComplete: function(slider) { updateCaption(slider); }

And the extra css (customize it as desired)

/* navigation css */
#nav { margin: 5px auto; width: 500px; height: 40px; }
#nav li { padding: 4px; float: left; }

#nav a {
display: block;
width: auto;
height: 20px;
background: #999;
padding: 8px;
text-align: center;
text-decoration: none;
color: #fff;
#nav a:hover { background: #000; }
#nav a.cur { background: #0080ff; }
#nav a.start-stop { background: #080; }
#nav a.start-stop.playing { background: #800; }

There is a demo on the first page of the documentation – you can explore the other demos there to get an idea of what else is possible.