Creating a news carousel with jQuery
Last week I had to do a news carousel for a project I'm developing. It had been a while since I had the chance to do something interesting with jQuery, so I wanted to share the experience of how easily you can build similar widgets for your site.
So first let's take a look at what we want to build.
Now, I know that there are a few plugins out there for jQuery that probably can do this, but the point of this post is to show how simple it is to create something like this with a few lines of jQuery and CSS.
Let's begin by defining how we will organize the content. Being a list of news, we can either use an ordered or an unordered list.
<div id="news_carousel"> <ul class="news"> <li> <img src="" alt="" /> <strong><a href="#">Title</a></strong> <span>Description</span> </li> </ul> </div>
Now that we have our content, we have to style it. The keys here are to:
- Align the list elements one next to the other.
- Make #news_carousel just show one list element at a time
- Use relative and absolute positioning to show the titles and descriptions over each image
Here's the CSS used in the sample with some comments:
#news_carousel { width: 444px; height: 333px; margin: 0; padding: 0; overflow: hidden; /* this will make only show 1 li */ position: relative; } #news_carousel ul.news { list-style-type: none; margin: 0; padding: 0; position: relative; } #news_carousel ul li { margin: 0; padding: 0; position: relative; /* to do absolute positioning of the child paragraph */ float: left; /* align one next to the other */ } #news_carousel ul.news li p { position: absolute; bottom: 10px; left: 0; margin: 5px; } #news_carousel ul.news li p strong { display: block; padding: 5px; margin: 0; font-size: 20px; background: #444; } #news_carousel ul.news li p span { padding: 2px 5px; color: #000; background: #fff; } #news_carousel ul.controls { position: absolute; top: 0px; right: 20px; list-style-type: none; } #news_carousel ul.controls li a { float: left; font-size: 15px; margin: 5px; padding: 2px 7px; background: #000; text-decoration: none; outline: none; } #news_carousel ul.controls li a.active { border: 2px solid #ccc; }
The Javascript code is pretty self-explanatory:
var news_carousel = function() { var items_size = $('#news_carousel ul li').length; if (items_size == 0) return; // Calculate the total width and set that value to // the ul.news width // Store each item width var width = 0; var widths = []; $('#news_carousel ul.news li img').each(function(i, e) { widths[i] = $(e).width(); width += widths[i]; }); $("#news_carousel ul.news").width(width); // Append the controls controls = '<ul class="controls"><li><a class="active" href="#">1</a>'; for ( var i = 2; i <= items_size; i++) { controls += '</li><li><a href="#">' + i + '</a></li>'; } controls += '</ul>'; $('#news_carousel').append(controls); $('#news_carousel ul.controls li a').click(function(event) { // if the ul is already moving, then do nothing if ($("#news_carousel ul.news:animated").length > 0) return false; var clicked_item = $(event.target); var current_active = $("#news_carousel ul.controls li a.active"); var current_index = parseInt(current_active.text()); var new_index = parseInt(clicked_item.text()); var move = new_index - current_index; //how many items it should be moved if (move != 0) { direction = (move > 0)? "-=": "+="; $('#news_carousel ul.news') .animate({marginLeft: direction + widths[new_index-1] }, 300); clicked_item.addClass("active"); current_active.removeClass("active"); } return false; }); }();
And that's it! Around 100 lines of code and you have your own home-made news carousel. Hope you found it useful! :)
(Pictures taken from: http://www.flickr.com/photos/christing/268490607/ and http://www.flickr.com/photos/11717181@N02/1170861540/.)