Anything Slider


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

In particular:

  • 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…)

Solution:

CSS First: The original CSS sheet looks like this (the original classes and ID before I changed them):

And:

After Editing the CSS:

And:

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:

Before Styling:

Menu Has Numbers and Is below my slider. Looks gross too.

After Styling:

Looks much Better

So that sums it up. Hope that helps you use the anythingSlider a bit better. Thanks.

Advertisements

About Jacob

As a college student currently working full time at an IT company, I am beginning to discover how overrated the classroom can be. As a marketing major, I have found resources online to be far superior to some of the things school has taught me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: