I am sure many of you have already heard or read about the sleek NIVO Image Slider built using jQuery and HTML. If you haven’t, you can go to the website and check it out for yourself. The slider allows you to display images and HTML text via 9 unique transition effects.
This slider serves as a static slider using only CSS/HTML and jQuery. Today, I am going to show you how you can integrate this nifty looking slider component into your WordPress theme effectively (a much easier way than what you have already known). Read on!
1. First Steps First
Download the NIVO slider files to your desktop and extract them to a folder. Copy the files called arrows.png, bullets.png and loading.gif from the nivo-slider/demo/images folder and paste them into your WordPress Theme /Images folder.
Now in your WordPress theme, decide an appropriate place where you want the slider to show up. For this particular example, I will be using the WordPress theme – “Twenty Ten (2010)” that comes with a default installation of WordPress (3.0+).
I want my slider to show up on the main page, so I will open up the index.php file for editing.