javascriptjqueryjquery-eventsanythingslider

Is it possible to add a click event to the anything slider controls


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


Solution

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