jCarouselLite Extended, Carousel Slider with Paging, NFL.com Style

If you’ve done some Googling you’ve come across jCarousel Lite and jCarousel by now. Both are excellent solutions as they stand. jCarousel in particular is a full featured JQuery carousel/slider plugin that makes slick presentations of unordered lists a snap. The “Lite” version is just that. A much smaller footprint for a lack of a better term is the main difference. Base functionality is very similar. I extended the “Lite” version as for most implementations it was perfect but there are just a couple key things I wanted that it didn’t have. So I extended it to include these features:

  • Pause the slide when hovered.
  • Add paging that was simple and customizable via css.
  • At the end of the last slide go to the first slide.
    To me those key additions make this already solid plugin even better. In the download below you’ll find two files. The extended uncompressed source and the minified counterpart. This was based on the original source of jCarouselLite v1.0.1  as of 8/1/2011.

DOWNLOAD

What you’ll end up with.

image

I won’t go into the full CSS styling. You can find this here in the documentation by the author. The below CSS is all you’ll need to add the pager feature. Please note that I chose this method rather than using images for ease of use. If you want to use images simply add your image as a background to the LI and position it centered for both x/y using CSS. It works just fine and makes the plugin nice and light weight as we aren’t managing images for the different states. As long as your image is properly positioned and correctly sized according to the size of your LI it will have a similar effect as if the image tags were right inside the LI.

NOTE: The Html for the pager is dynamically built within the plugin for simplicity. You could certainly extend this for your needs quite easily if desired. The structure of the dynamic elements are very basic and simplistic. In fact you could easily wire up some custom JQuery using .appendTo() if you wanted to add some sort of element to the li’s.

Dynamic Pager Html

<div class="pager">
    <ul>
    <li class=”0”></li>
    <li class=”1”></li>
    <li class=”2”></li>
    <li class=”3”></li>
    </ul>
</div>

CSS Styles for above NFL.com carousel look.

The pager styling:

.pager
{    
    position: absolute;
    height: 24px;
    right: 15px;
    bottom: 30px;    
}

.pager ul
{    
    list-style-type: none;
    margin: 0px; 
    padding: 0px;  
}

.pager li
{
    border: 1px solid #333333;
    line-height: 15px;
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: #F7F7F7;
    margin: 2px 4px 2px 4px;
    vertical-align: middle; 
    float: right; /* float:right; required for IE because it sucks and can't handle inline-block*/ 
    
    /* CSS 3 Styles */
    opacity: .50;
    filter: “alpha(opacity=50)”;
    -moz-border-right: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

.pager li:hover
{
    background-color: #C41313;
    cursor: pointer;
    
    /* CSS 3 Styles */
    opacity:100;
    filter:alpha(opacity=100);
    filter: “alpha(opacity=100)”;
}

.pager li.selected
{
    /* CSS 3 Styles */
   background-color: #C41313;
   opacity:100;
   filter:alpha(opacity=100);
   filter: “alpha(opacity=100)”;
}

The Overlay style that sits under the pager and contains the description text for the given slide:

.carousel-overlay
{
    position: relative;
    bottom: 95px;
    width: 725px;
    height: 75px;    
    background-image: url('Images/Backgrounds/carousel_bkgrnd.png');
    background-repeat: no-repeat;
}

.carousel-overlay div
{
  padding: 3px 24px 3px 24px;
  width: 450px;
}

.carousel-overlay-caption
{
    font-weight: 600;
    font-size: 1.1em;
    color: #F2F2F2;
}

.carousel-overlay-description
{    
    color: #F2F2F2;
}

Again I didn’t enclose the Html or the styling for the carousel itself. If you need this please follow the detailed documentation at the author’s site here. If you would like to use the overlay image in the demo you can DOWNLOAD it along with the source plugin.

Wiring Up Your Carousel

Wiring up the carousel is extensively covered by the author so I’m only going to hit on the extended options which are very simple.

<script type="text/javascript">
    $('.carousel').jCarouselLite({
        visible: 1,
        auto: 8000,
        speed: 1200,
        circular: false, // Set circular to false to use onEndFirst.
        onEndFirst: true, // Navigates to first slide on end.
        showPager: true, // Boolean to show or hide the pager.
        pauseOnHover: true, // Pauses the carousel when hovered over
        pager: 'pager', // The class to use for the pager.
        scroll: 1
    });
</script>

Wrapping Up

Please note as normal you will need to add reference in your header to JQuery itself and the extended jCarousellite plugin as normal. I know you are aware of this but for those that are new and in the interest of being complete it should be mentioned.

To reiterate the ‘”pager” was intentionally created using only CSS and the basic dynamic html for structure. This was because your pager could literally look like anything and may need to be placed in many locations. If you want to place the pager outside of the main carousel element use neg. values for top, bottom, right, left. By using CSS only rather than embedding images it becomes much more tolerant of your unique design.

This was tested in Opera, Chrome, FireFox, IE 9 and IE 8. I have not tested on any other browsers.

Advertisements

Tags: , , , , , , , ,

About Origin1 Technologies

Developer: Asp.Net, MVC, JQuery, MS SQL, VB, C#, Java, Eclipse, Android, Apple, FileMaker Pro and others.

6 responses to “jCarouselLite Extended, Carousel Slider with Paging, NFL.com Style”

  1. KntL says :

    hey,

    you have done what i needed so far but think you have to use the PAGINATION word for SEO and in your article cuz the common name for page selecting is PAGINATION. i hope it will effect to people find your article.

    additionally you can share what you have done with the coder of original jCarousellite and maybe he would share your additions on his web site. it would be great for new user who is going to meet with that awesome jquery carousel library “jCarouselLite”.

    thx,
    KntL

    • chazelton says :

      Yeah actually I did pop an email over to the Author of jCarouselLite but didn’t hear back, however as with this response, he probably doesn’t check it as he would his corporate email account.

  2. Michael says :

    The download links seem to be wrong – can you fix this please as your extension seems to be exactly what I’m after!
    Thanks.

  3. Samantha Miller says :

    The download link is still broken, please can you fix this as this is exactly what I need too! Thanks

  4. Stuart says :

    ReferenceError: setPagerPage is not defined

    setPagerPage(curr); // Custom Code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: