theme with navigation active

[king400]

hi anybody have theme with navigation thumb active

or how must active thumb

if anybody have pls help me thanks

[Mottie]

Hi @king400!

Can you please explain what you mean by navigation thumb active?

Are you asking how to style the active navigation tab? If so, look in the theme css file. Here is the default theme definition:

/* Navigation current button, default state */
.anythingSlider-default .anythingControls a.cur {
    background: #888;
    color: #000;
}

Or are you asking about making the slider active*, in case there are multiple sliders, after it initializes. To do this, either change the current panel in the slider, or use the makeActive api function:

$('#slider').data('AnythingSlider').makeActive();

*Only the active slider will change slides when the user presses the keyboard arrow keys, if the enableKeyboard option is true.

[king400]

Hi mottie Thanks for answer All theme without navigation activate I want theme with navigation If you have link for this please give me Thank

[Mottie]

Just remove the .activeSlider class name from the css (default css) and all sliders will "appear" active. But as I said before, only the actual active slider will change when the user uses keyboard arrow keys.

[king400]

@Mottie my means not active slider my means thumb like pic i uploaded i want theme like this with anything slider

[Mottie]

To add thumbnails, use the navigationFormatter option:

$('#slider').anythingSlider({
    navigationFormatter: function (i, panel) {
        // add thumbnails as navigation links
        return '<img src="' + panel.find('img').attr('src') + '">';
    }
});

then modify, or make your own custom theme. Here is an example modifying the default theme. It's not pretty because it needs to override the default settings:

 ul#slider, ul#slider li {
    width: 400px;
    height: 300px;
    list-style: none;
}
.anythingSlider-default .anythingControls img {
    width: 50px;
    height: 40px;
    border: #000 1px solid;
}
.anythingSlider.anythingSlider-default .anythingControls ul a,
.anythingSlider.anythingSlider-default .anythingControls ul a:hover,
.anythingSlider.anythingSlider-default .anythingControls ul a.cur {
    background: transparent;
    height: auto;
    padding: 2px;
}
.anythingSlider.anythingSlider-default .anythingControls ul a.cur img {
    border: red 1px solid;
}

[Mottie]

I'm guessing this issue has been resolved. If not, please feel free to post a message here for me to reopen it and I will try to assist you further.