Home › Forums › JavaScript › anything slider numbers to text › Re: anything slider numbers to text
August 12, 2010 at 3:29 pm
#81451
oneworld95
Member
This will work for you! The code I gave you is pasted into a SCRIPT tag in the page where you need to use the AnythingSlider; it sets the properties for that specific instance of AnythingSlider. For each page/slider, use a different formatText function. You can even have mulitiple navigationFormatter functions on one page — just call the function something different for each instance and set the navigationFormatter to that name instead of formatText.
Here’s what you need for your two sliders:
Code:
jQuery(‘.anythingSlider’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myFormatFunc // Your custom function
});
jQuery(‘.anythingSlider-product-grid’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: true, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myOtherFormatFunc // Another custom function
});
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myFormatFunc // Your custom function
});
jQuery(‘.anythingSlider-product-grid’).anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: true, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
navigationFormatter: myOtherFormatFunc // Another custom function
});
Then define your formatter for each:
Code:
function myFormatFunc(index, panel) {
// your code that returns the HTML you want for this slider’s numbers
}
// your code that returns the HTML you want for this slider’s numbers
}
function myOtherFormatFunc(index, panel){
// your code that returns the HTML you want for this slider’s numbers
}