Forums

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

Home Forums JavaScript Anything Slider – removing pagination and seperating show/hide caption Re: Anything Slider – removing pagination and seperating show/hide caption

#96902
Mottie
Member

Hi mkultron!

Sorry it took me a bit to get the demo working since I found a bug in the plugin… so try this demo, but before you try to implement it, update AnythingSlider to the latest version.

I added two options right at the top of the code:

1. toggleTime which is the amount of time it takes to slide up and down.
2. showCaptionInitially when set to true will automatically open the caption when a slide comes into view. When false, it stays hidden until clicked.

    // caption toggle animation time
var toggleTime = 500,
// always show caption when slide comes into view
showCaptionInitially = true,

updateCaption = function(slider, init){
if (init && showCaptionInitially) {
setTimeout(function(){
slider.$targetPage.find('.caption').animate({
bottom: 0
}, toggleTime);
}, slider.options.delayBeforeAnimate + toggleTime);
} else if (!init) {
var cap = slider.$lastPage.find('.caption');
cap.css('bottom', -cap.innerHeight());
}
};

$('#slider').anythingSlider({
infiniteSlides : false,
animationTime : 0,
delayBeforeAnimate : 500,
// buildNavigation : false,

// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
slider.$items.each(function(){
var cap = $(this).find('.caption');
cap
.css('bottom', -cap.innerHeight())
.click(function(){
cap.animate({
bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
}, toggleTime);
});
});
updateCaption(slider, true);
},

// Callback before slide animates
onSlideBegin: function(e, slider) {
updateCaption(slider, true);
},

// Callback after slide animates
onSlideComplete: function(slider) {
updateCaption(slider, false);
}

});‚Äč