jQuery RSS Slider
A recent project of mine involved a website where the news feed was powered purely by RSS. To add some life to the news & events sections on the home page I created a slider that scrolls through the three latest entries using ‘the jFeed’ and ‘jQuery Flips’ plug-ins.
Step 1: The HTML
The classes and ID’s used are:
- ‘to-flips’ – The container DIV for the jQuery Flips plug-in
- ‘news’ – The DIV jQuery Flips assigned as the slider
- ‘content’ – The inner DIV for jQuery Flips. Mainly used for styling.
- ‘latestnews’ – The DIV jFeed populates with the RSS feed
- ‘flipnav’ – The DIV jQuery Flips populates with ‘next’ & ‘previous’ buttons.
There are several plug-ins available for jQuery that will parse RSS feeds, my personal favorite being jFeed. By default the jFeed script will only work with RSS feeds on the same domain, however there are numerous PHP proxy available if you need to parse an external file.
A Word of Thanks
I’d like to say a quick thank you to Nick Dunnington for helping me iron out a couple of bugs in this.
The attached zip archive contains JS, CSS and HTML files.