Jquery Anything Slider Plugin for WordPress Magazine Themes

By Matt Dunlap on June 12th, 2010

20 comments

Tweet Tags: jquery, js, magazine themes, plugins, Wordpress

There are a lot of content sliders floating around. I recently made this one for my personal website. It’s based on the Anything slider Jquery plugin. I have made available two plugins for the content slider. The slider Jquery code is the same, but the CSS style is different.

The slider will work on all WordPress websites, but the there is no way to make sure the slider looks good in all websites. This is due to the different widths and heights of websites. Therefore, I’ll try to outline the easiest way to get the content slider and the images in the slider to look their best.

After you activate the content slider plugin, first thing you will need to do it adjust the width to fit into your content sections.

• The stylesheet for the content slider is located in a folder called css in the plugin folder.
• I have added “border:0px solid #cc0000″ so you can set that to 1 to show a border around the elements if you just can’t seem to get it to look right. When everything looks correct. You should set the border to 0.
• The content slider will display in a div with a class called .anythingslider. I think you can set this to 100%, but if that doesn’t work, set it to the fixed full width of the area in pixels.
• the slides are in a class called .wrapper. This cannot be a percent, it has to be a fixed width.
• .anythingslider ul li has to be the same width as the .wrapper class.
• #thumbnav and #start-stop need the “top” attribute equal the .wrapper height.

That’s about it for CSS style. but you also need to make sure that your images are big enough to fit in the image section. I use two div’s in each slider. The left div shows an image from the post and the right div shoes the post title and excerpt. You can add images to the slider without having to add them to the post. I use the fullsize image, centered in the left div. You can use the built in wordpress image editor (2.9+) to make sure the image fits properly.

to display the content slider, you need to call this

<?
$number_of_posts = 10 //optional, default is 5
anything_content_slider($number_of_posts);
?>

I’m assuming that you are using a magazine style theme with this plugin. You can also download my theme be subscribing to my newsletter. It has the Anything Slider plugin included.

Confused, watch this video to see how to add images to the content slider from a post.

The first plugin uses most of the original styling from the anythingslider.

Download the plugin here

The second plugin is the one I used on my websites. The Javascript  is the same but I have a different style. This one also uses CSS3 custom fonts which might not work in all browsers… Actually I know it doesn’t work in IE.

Download the plugin here

You cannot active both plugins at the same time. They will create conflicting errors. You can add them both to your plugin directory, but only one can be activated at a time.