We'll get started as usual by setting up our basic HTML file and associated files and folders, just like we did in Chapter 1,Designer, Meet jQuery.
- In the body of the HTML document, the HTML markup for our featured content slider will be very similar to the HTML we set up for a news ticker. The only difference is that I'm replacing the images with larger images since I want images to be the main focus of the slider. I'm using images that are 600 pixels wide by 400 pixels tall. The following is a sample of the HTML:
<div class="jcarousel-skin-slider"> <ul id="featured-carousel"> <li> <a href="#"><img src="images/600/Switzerland.jpg" alt="Switzerland"/></a> <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> <a href="#"><img src="images/600/CostaRica.jpg" alt="Costa Rica"/></a> <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> </div>
I have 12 items in total on my list, each marked up just the way you see here. Note that I've wrapped my list in a
divwith the classjcarousel-skin-slider. We'll be using this class to style our list with CSS. - Next up, we'll style our list of items. We'll overlay the headline and paragraph of text on the photo, the header along the top, and the paragraph of text along the bottom. The following is the CSS we can use to accomplish that:
#featured-carousel li { overflow:hidden;list-style-type:none;position:relative;width:600px;height:400px; } #featured-carousel h4 { position:absolute;top:0;left:0;right:0;padding:10px;margin:0;color:#000;font-size:36px;text-shadow:#fff 0 0 1px; } #featured-carousel p { position:absolute;bottom:0;left:0;right:0;padding:10px;margin:0;color:#fff;background:#000;background:rgba(0,0,0,0.7); }Now each item in my list looks similar to the following screenshot:
I want to draw your attention to a couple of handy CSS tricks I've put to use here. First, notice that I've added a small white
text-shadowto the headline and have made the headline text black. Just in case this text happens to overlay a dark area of the image, the subtle white outline around the text will help the text to stand out. Then, note that I've added two background values for the short paragraph of text. The first, a solid black, the second a transparent black color denoted with anrgbavalue. The first value is for versions of Internet Explorer before IE9. Those browsers will display a solid black background. Newer and more capable browsers will use the second value—thergbavalue—to display a slightly transparent black background behind the text—allowing the image to show through a bit while making the text more readable. - Now, we'll attach the jCarousel JavaScript at the bottom of the page, between jQuery and our
scripts.jsfile, just as we've done in the other examples in this chapter.<script src="scripts/jquery.js"></script> <script src="scripts/jquery.jcarousel.min.js"></script> <script src="scripts/scripts.js"></script>
- Now we're going to write a bit of CSS to customize the appearance of our content slider. Open your
styles.cssfile and add the following styles:.jcarousel-skin-slider .jcarousel-container-horizontal { width: 600px; } .jcarousel-skin-slider .jcarousel-clip { overflow: hidden; } .jcarousel-skin-slider .jcarousel-clip-horizontal { width:600px;height:425px; } .jcarousel-skin-slider .jcarousel-item { width:600px;height:400px; }Yep, that's really it. Just a few lines. We'll set the width of an individual item, the container, and the clip container to 600 pixels, the same as the width of one image. The height of the individual item is also set to 400 pixels, but we're going to set the clip container's height to 425 pixels to give us 25 pixels to add in some external controls, which we'll be looking at in a minute.
- Now, open up your
scripts.jsfile. The first thing we want to do is select our list and store it in a variable. This is because we're going to be using the list multiple times, and we don't want jQuery to have to query the DOM looking for our list each time.var slider = $('#featured-carousel'), - Next, we'll set up our document ready statement and call the
jcarousel()method on the slider, and we'll tell it that we want to scroll one pane at a time:var slider = $('#featured-carousel'), $(document).ready(function(){ slider.jcarousel({ scroll: 1 }); }); - We're going to be adding our own external controls, so we'll need to remove the ones that the
jcarousel()method creates on its own. Here's how we can do that:$(document).ready(function(){ slider.jcarousel({ scroll: 1, buttonNextHTML: null, buttonPrevHTML: null }); });The
buttonNextHTMLandbuttonPrevHTMLkeys are provided so that you can specify your own HTML markup for those buttons. In this case, we're passingnullas the value for both keys which will prevent them from being created.Now we've done the basics to set up our slider. If you look at the page in your browser, you'll see the first slide. We haven't yet provided a way to navigate to the other slides, so let's jump on that next.
We've set up a basic slider that shows one item at a time, but you've no doubt noticed that there isn't a way to get to view any slide other than the first one. We removed jCarousel's default next and previous buttons, and we haven't provided any alternative yet. Let's add in some pagination controls so our site visitors can get to any slide they like.