Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anything Slider: Custom Forward/Backward Buttons and Thumbnav

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #36879
    hexxd
    Member

    I’m trying to install the slider on a site, and I’d like to add custom forward and backward buttons, as well as a custom thumbnav. However, there’s no html that indicates these, so I assume that they’re built into the jquery and css. However if I want to use an

    as my forward button for example, how can I do that? Do I have to modify the jquery?

    #97675
    Mottie
    Moderator

    I have a few demos on modifying the navigation, check out the demos on the main document page.

    In particular, check out these demos:

    * Move the navigation controls
    * Use “appendForwardTo” and “appendBackTo” options – no demo, but here are the docs.
    * Control Multiple sliders with one set of arrows.
    * Custom controls (navigation only here, but combining the above demo with this one would work)

    Honestly, I wouldn’t recommend using an H3 as a control button. It’s not semantically correct to do that, but it would be fine to add an link inside of it to control the slider.

    #97759
    hexxd
    Member

    Yea I had meant

    anyway. Thanks.

    #97835
    hexxd
    Member

    At this point I’ve implemented the script to change the navigation, I think. However it somehow isn’t applying, as the default nav is still fully functional. This is the script I input:

    #97838
    Mottie
    Moderator

    Does “nav-slider” exist? Could you share a demo?

    #97855
    hexxd
    Member

    I have no demo that I can post, but see below.

    #97858
    hexxd
    Member

    “nav-slider” is the id assigned to the div that contains the desired slider controls. Their HTML is as follows:

     
    #97941
    Mottie
    Moderator

    Here is a demo using all of the navigation append to functions.

    HTML



      ...

    Script

    $('#slider').anythingSlider({
    appendBackTo: $('#nav-slider span:eq(0)'),
    appendControlsTo: $('#nav-slider span:eq(1)'),
    appendForwardTo: $('#nav-slider span:eq(2)'),

    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
    // This is the default format (show just the panel index number)
    return "" + index;
    }
    });‚Äč

    Wait… so, “#nav-slider” isn’t empty? If you already have the HTML set up then you’ll need to assign the navigation controls to them using code similar to that used in this demo. Then make sure the buildNavigation and buildArrows options are false.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.