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?

    Thanks!

    # November 23, 2012 at 12:40 pm

    @Paesano2000

    You’re simply spelling forward wrong;

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

    http://jsfiddle.net/XkHvg/

    # 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: 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;

    });

    # 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

    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](http://jsfiddle.net/Mottie/XkHvg/1/))

    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;
    });

    # 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](https://github.com/CSS-Tricks/AnythingSlider/wiki/Callbacks-and-Events#wiki-functions “”).

    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.

*May or may not contain any actual "CSS" or "Tricks".