Anything Slider: Custom Forward/Backward Buttons and Thumbnav

[hexxd]

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?

[Mottie]

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.

[hexxd]

Yea I had meant

anyway. Thanks.

[hexxd]

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:

[Mottie]

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

[hexxd]

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

[hexxd]

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

[Mottie]

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.

[Author]

Posts