Get a free trial // Grow your CSS skills // Land your dream job

AnythingSlider – Appending Forward and Back Buttons (half working)

  • # November 23, 2012 at 10:39 am

    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?


    # November 23, 2012 at 12:40 pm


    You’re simply spelling forward wrong;

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

    # November 23, 2012 at 1:20 pm

    How the hell did I miss that? Lol

    I see why now… I took Mottie’s jsfiddle to have no errors in it:
    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:


    var slide = $(this).attr('href').substring(1);


    return false;


    # November 23, 2012 at 1:57 pm

    How do you mean advance it forward and backward?

    # November 23, 2012 at 4:40 pm

    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?

    # November 23, 2012 at 8:00 pm


    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’)) {
    } else {
    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;

    # November 26, 2012 at 1:03 pm

    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 :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed