treehouse : what would you like to learn today?
Web Design Web Development iOS Development

AnythingSlider - Appending Forward and Back Buttons (half working)

  • Hello! So I have been trying to figure out how to use the appendFowardTo and appendBackTo functions to some HTML elements, but so far I have had little luck.

    I forked one of Mottie's jsfiddle playgrounds to work with the settings and so far only the appendBackTo seems to be working... check out the jsfiddle here.

    Any idea why the appendFowardTo function isn't working but the appendBackTo is?

    The whole reason I looked into this was to achieve setting a link tag to advance the slider forward. Could someone offer a solution for both the issue with the appendBackTo, and allowing a link to trigger the "go forward" functionality?

    Thanks!

  • @Paesano2000

    You're simply spelling forward wrong;

    I have forked this for you and it works fine now.

    http://jsfiddle.net/XkHvg/

  • How the hell did I miss that? Lol

    I see why now... I took Mottie's jsfiddle to have no errors in it: http://jsfiddle.net/Mottie/VM8XG/ It was misspelt in the fiddle I forked...

    Any help however on a function that will advance the player forward or backward would be nice. I do have this one, but it requires the specific hastag # of the slide:

    $('.advance-button').click(function(){
    var slide = $(this).attr('href').substring(1);
    $('#slider').stop().anythingSlider(slide);
    return false;
    });

  • How do you mean advance it forward and backward?

  • There is a function in the plugin that advances the slides forward or backward which is tied into the default arrow buttons that are generated.

    I want to take that functionality and apply it to an event (click, hover, etc.) on any other element I wish, instead of having to use appendForwardTo, which generates its own HTML elements. With this I can also tie in some other events to happen when the user advances the slider forward.

    Understand what I'm getting at?

  • Hiya!

    Yeah I'm a gud speeler. I fixed that in the newer playground versions, so I thought it wasn't going to haunt me! LOL oh well.

    You can use the AnythingSlider api to advance the slides forward and back like this (here's a demo)

      var api = $('#slider').data('AnythingSlider');
      $('.go-forward, .go-back').click(function(){
          if ($(this).hasClass('go-forward')) {
              api.goForward();
          } else {
              api.goBack();
          }
          return false;
      });
    

    ​ Here is a more condensed version that is harder to read but does exactly the same thing:

      var api = $('#slider').data('AnythingSlider');
      $('.go-forward, .go-back').click(function(){
          api[$(this).hasClass('go-forward') ? 'goForward' : 'goBack']();
          return false;
      });
    
  • Heya Mottie,

    Haha damn typos! I was trying to figure out what was going on for hours!

    Wow, that is super awesome! I totally missed the API section.

    Thank you so much for your help and the work you do on the plugin :)