Re: AnythingSlider – Moving caption location

[Mottie]

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):
HTML

...

Code

var updateCaption = function(slider){

var cap = slider.$currentPage

.find('.caption').fadeIn(200).end()

.siblings().find('.caption').fadeOut(200);

};



$('#slider').anythingSlider({

stopAtEnd: true,

autoPlay : false,

infiniteSlides: false,

appendControlsTo: $('#nav'),



// *********** Callbacks ***********

// Callback when the plugin finished initializing

onInitialized: function(e, slider) {

updateCaption(slider);



slider.$controls

.append('
Show / Hide Caption
')

.find('.show').click(function(){

slider.$currentPage.find('.caption').fadeToggle(200);

});

},



// Callback before slide animates

onSlideBegin: function(e, slider) {

$('#current-caption').fadeOut(200);

},



// 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.