AnythingSlider: How to add faded background on following divs

[hoeiesta]

Hi,

Thanks a lot for this lovely slider:-)
I have implemented the anythingSlider on a website I’m building with ExpressionEngine.
Link to test page
I’m trying to put an opaque background on the next div (not the current visible one). I have made an example where the second li is opaque. But what I really want is that all non-active divs have the same effect and that the current one has no effect.

I tried to put the background on all the list elements but I can’t get it removed on the current one.
Or maybe there is another way of doing this?

I have a second issue as well… (jQuery maybe?)
I have used the minimalist round theme to make small navigation buttons on top of the page.
But I would also like that you can click on the titles beneath and go to the list element with this article.
Is it possible to duplicate the anythingControls and list the titles with the same links as the small buttons? Hope you understand what I mean…

Any help would be greatly appreciated.

[Mottie]

Hi Hoeista!

To fix the background, instead of using “nth-child”, because that number won’t change, try this instead:

#slider2 li:not(.activePage) {

padding: 0;

background: #FFF;

opacity: 0.2;

}

The only problem is that the opacity won’t be removed until the animation stops and the “activePage” class is applied.

The second issue, getting the titles at the top to work is a bit more complicated. First, use this code to activate those titles:

$("#directory").find("li").click(function(){

var page = $(this).index() + 1;

$('#slider2').anythingSlider(page);

return false;

});

But then you’ll notice that clicking on them doesn’t do anything. The reason is because the navigation controls are absolutely positioned above the titles and thus covering them up. It might be a better idea to use the “appendControlsTo” option to completely move the controls, but then you’ll have to add your own custom css styling. Here is a demo on how to use the “appendControlsTo” option.

[hoeiesta]

Hi Mottie,
The not selector worked perfect:-)
I will check into the “appendControlsTo”.

Thank you very much for your help!

[Author]

Posts