I am using Anything slider in my website where I want to add a click event to the controls. Is this possible? When I tried to do this my event is not triggering. Could anyone have idea about this?
My click event details:
$(function(){
$('.thumbNav li a').click(function () {
$(".spec li a").css('color','#fff');
});
});
fiddle link jsfiddle.net/Mottie/ycUB6/5340
The reason you code isn't working is because the navigation controls don't exist until after AnythingSlider has initialized. So, you really have two options:
1) Use your function within the onInitialized
callback function (demo):
var tabContainers = $('div.spec-nav > div');
tabContainers.hide().filter(':first').show();
$(function () {
$('#slider1, #slider2, #slider3').anythingSlider({
theme: 'metallic',
easing: 'easeInOutBack',
navigationFormatter: function (index, panel) {
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
// Callback when the plugin finished initializing
onInitialized: function (e, slider) {
$('div.spec-nav ul li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.spec-nav ul li a').removeClass('spec-actv');
$(this).addClass('spec-actv');
return false;
}).filter(':first').click();
},
onSlideComplete: function (slider) {
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});
2) Build this functionality when the navigation tabs are created... If you look at the navigationFormatter
documentation, you'll see that you can return any attributes for the tab; this uses the jQuery()
method of creating DOM elements.
$('#slider').anythingSlider({
navigationFormatter : function(i, panel){
return {
'class' : 'imatab',
'data-hdr' : 'Header: ' + panel.find('h2').text(), // save text from the h2 in the panel
'title' : 'This text will end up in a tooltip',
'html' : '<a class="panel' + i + '" href="#"><span>' + ['Cat', 'Dog', 'Bear', 'Wolf', 'Horse', 'Bjork?'][index - 1] + '</span></a>',
'click' : function(){ alert("AHHH I've been clicked"); }
};
}
});
And if you are using jQuery 1.8+, you can pass any jQuery instance methods like this:
$('#slider').anythingSlider({
navigationFormatter : function(i, panel){
return {
class : 'imatab',
on : {
click : function( event ) {
// do something
}
},
html : '<a class="panel' + i + '" href="#"><span>' + i + '</span></a>'
}
}
});
I didn't make a demo for this method, but I hope you get the idea.