Follow these steps to set up a vertical news listing:
- First, up, we'll set up a basic HTML file and associated files and folders like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, create an unordered list of news items. Each news item will have an image and a div that contains a headline and an excerpt:
<ul id="news-carousel"> <li> <img src="images/thumbs/Switzerland.png" alt="Switzerland"/> <div class="info"> <h4>Switzerland</h4> <p>Switzerland, officially the Swiss Confederation, is a federal republic consisting of 26 cantons, with Bern as the seat of the federal authorities</p> </div> </li> <li> <img src="images/thumbs/CostaRica.png" alt="Costa Rica"/> <div class="info"> <h4>Costa Rica</h4> <p>Costa Rica, officially the Republic of Costa Rica, is a country in Central America, bordered by Nicaragua to the north, Panama to the south, the Pacific Ocean to the west and south and the Caribbean Sea to the east.</p> </div> </li> ... </ul>
I've created 12 items in total on my list, each with this same structure. Keep in mind that each item in the carousel must be of the same width and height.
- Next up, we'll open our
styles.cssfile and add a few lines of CSS to get each news item styled the way we'd like, with the image on the left and the headline and excerpt on the right:#news-carousel li { overflow:hidden;zoom:1;list-style-type:none; } #news-carousel li img { float:left; } #news-carousel li .info { margin-left:210px; } #news-carousel h4 { margin:0;padding:0; } #news-carousel p { margin:0;padding:0;font-size:14px; }Feel free to add some additional CSS to style the list to suit your own taste. If you open the page in a browser, at this point, you can expect to see something similar to the following screenshot:
- Just as in our simple carousel example, we'll attach the tango skin CSS in the
<head>section of the document, and the jCarousel plugin script at the bottom of the document, between jQuery and our ownscripts.jsfile. - Next, open your
scripts.jsfile. We'll write our document ready statement, select our news ticker, and call thejcarousel()method, just like we did in the previous example.$(document).ready(function(){ $('#news-carousel').jcarousel(); }); - We'll pass some customization options to the
jcarousel()method to adjust our carousel to work the way that we'd like. First, it should be vertical rather than horizontal, so passtrueas a value for theverticalkey:$('#news-carousel').jcarousel({ vertical:true }); - We'd also like to scroll only one item at a time:
$('#news-carousel').jcarousel({ vertical:true, scroll:1 }); - And, we'd like the list of news items to loop endlessly as follows:
$('#news-carousel').jcarousel({ vertical:true, scroll:1, wrap:'circular' }); - We'd like the carousel to automatically advance through the news stories in true news-ticker fashion. We'll advance the carousel every three seconds:
$('#news-carousel').jcarousel({ vertical:true, scroll:1, wrap:'circular', auto: 3 }); - And last but not least, we'll slow the animation down a bit so that it's less jarring in case our site visitor is in the middle of reading when the animation is triggered. 600 milliseconds ought to be slow enough:
$('#news-carousel').jcarousel({ vertical:true, scroll:1, wrap:'circular', auto: 3, animation: 600 }); - Now that we've got jCarousel configured just the way we'd like, all that's left to do is customize the appearance of the carousel. We're currently using the default tango skin, which is still assuming our individual items are 75 pixels wide by 75 pixels tall. Open your
styles.cssfile and we'll get started by adjusting the necessary widths and heights as follows:.jcarousel-skin-tango .jcarousel-item { width:475px;height:150px; } .jcarousel-skin-tango .jcarousel-clip-vertical { width:475px;height:470px; } .jcarousel-skin-tango .jcarousel-container-vertical { height:470px;width:475px; }We've set the size of an individual item to 475 pixels wide by 150 pixels tall. Then the size of the container and clip container are adjusted to show three items. Just as a reminder—since each item in our carousel is 150 pixels tall and there are 10 pixels of space between items, we can calculate the height of the container as follows:
150 + 10 + 150 + 10 + 150 = 470px
We're using heights instead of widths for our calculations since our carousel is now vertical rather than horizontal.
- Next, we'll adjust the tango style a bit to fit in with my site's design. I'm going to start by replacing the pale blue color scheme of the container with an orange color scheme, and adjust the rounded corners to be a bit less round:
.jcarousel-skin-tango .jcarousel-container { -moz-border-radius: 5px;-webkit-border-radius:5px;border-radius:5px;border-color:#CB4B16;background:#f9d4c5; } - Now, let's replace the small blue arrows of the tango skin with a long orange bar that spans the full width of our carousel. I've created my own arrow graphic that I'll show in the middle of each button:
.jcarousel-skin-tango .jcarousel-prev-vertical, .jcarousel-skin-tango .jcarousel-next-vertical { left:0;right:0;width:auto; } .jcarousel-skin-tango .jcarousel-prev-vertical { top:0;background:#cb4b16 url(images/arrows.png) 50% 0 no-repeat; } .jcarousel-skin-tango .jcarousel-prev-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-vertical:focus { background-color:#e6581d;background-position:50% 0; } .jcarousel-skin-tango .jcarousel-next-vertical { background:#cb4b16 url(images/arrows.png) 50% -32px no-repeat;bottom:0; } .jcarousel-skin-tango .jcarousel-next-vertical:hover, .jcarousel-skin-tango .jcarousel-next-vertical:focus { background-color:#e6581d;background-position:50% -32px; }Now, if you refresh the page in the browser, you'll see that the carousel is re-designed a bit with a different color scheme and appearance:
Moving your mouse over the top or bottom bar will lighten the color a bit, and clicking a bar will advance the carousel in that direction by one item.
What just happened?
In this case, we used the jCarousel plugin to create a vertical news ticker. Our news ticker automatically advances one item every three seconds. We slowed down the animation to make for a smoother reading experience for our site visitors. We also saw how we can customize the tango skin's CSS to customize the color scheme and appearance of the carousel to fit our site's design. Next up, we'll take a look at how we can add some external controls to the carousel.
Have a go hero — design your own carousel
Now that you've seen how to customize the appearance and behavior of the jCarousel plugin, design your own carousel. It could be horizontal or vertical, contain text, images, or a combination of both. Experiment with the settings that the jCarousel plugin makes available to you — you'll find them all listed out and explained in the plugin's documentation.