I am currently working on a new project that involves a home page/landing page that must deliver lots of information without the “overload” effect. What better choice than a nice big slider that allows me to add numerous (I wouldn’t say limitless) slides.
I did my research and concluded that the anything slider jQuery plugin offered the most functionality for what I wanted to do.
Easy Part: Setting up the HTML, a few div tags, an ID selector, etc. The plugins and most of the scripting can be copied from the net and used by inserted your ID.
Hard Part (In my opinion): styling the slider
- Positioning the menu to be inside the slider instead of below it.
- Uses images from my design as the navigation images, including active and hover states
- Removing the numbers from the navigation (1,2,3…)
CSS First: The original CSS sheet looks like this (the original classes and ID before I changed them):
After Editing the CSS:
Lets look at what is going on here:
First, for some reason, the default CSS is set up to add an extra class onto the navigation links that prevented me from changing the active states. All I had to do was delete the class div.anythingSlider.activeSlider .anythingControls ul a, and make sure to the leave the a.cur class (that’s the plugin’s “active” denotation)
Second, by just playing around with the styles of the .anythingControls ul a, you can add images, spacing, etc. The bottom two classes in the new CSS do two things. The first class removes the numbering from the controls links (display:none) the second class gives me my hover image (which in this project is the same as the active state).
That solved all my CSS problems.
Positioning AnythingSlider Navigation within my HTML Slider:
This was just a simple trick that took me entirely way too long to figure out, but all you need to do is:
Set #slider (whatever your slider ID is) to have a greater Height Value than what you will set the anythingSlider Height to.
In my case, my #slider height: 545px;
While my anythingSlider height: 490px;
When it’s all said and done this is my result:
Menu Has Numbers and Is below my slider. Looks gross too.
Looks much Better
So that sums it up. Hope that helps you use the anythingSlider a bit better. Thanks.