Killer Carousel Example: Navigation buttons

Applies from version 1.1 rev 1311271343

These examples shows how you can implement navigation buttons with a carousel, in addition to the usual mouse, wheel or touch actions.

By setting the showNavigation:true property, a default set of navigation buttons will appear in the bottom right.

The buttons are styled via the killercarousel.css file, and styled using the following CSS classes:

.kc-nav-wrap - a parent wrapper for the navigation buttons (typically, no need to change this)
.kc-nav-button, .kc-nav-button-active - the buttons themselves

In addition, the classes .active and .last will be applied to the appropriate buttons so you can style those states differently.

Positioning

The set of buttons is positioned using the navigationHorizontalPos and navigationVerticalPos properties.

Here are some examples

navigationVerticalPos:'bottom:15px', navigationHorizontalPos:'middle' - 15 pixels from bottom in the middle
navigationVerticalPos:'top:15px', navigationHorizontalPos:'right:15px' - 15 pixels from top, 15 pixels from right edge
navigationVerticalPos:'middle', navigationHorizontalPos:'middle' - middle of carousel, unlikely to be useful

Default Navigation Buttons

Default buttons appear near bottom-right, equivalent to:

navigationVerticalPos:'bottom:15px', navigationHorizontalPos:'right:15px'

The Virgin and Child with St Anne and St John the Baptist 1500

Vertical Navigation Buttons

This was created by simply overriding the CSS like this:


/* Make buttons square and yellow. */
.kc-nav-button {
    clear:both;
    margin-bottom: 5px;
    width:10px;
    height:10px;
    background-color: #fc0;
    border-radius:0px;
}

/* No margin on last one. */
.kc-nav-button.last {
    margin-bottom:0;
}

/* White active button. */
.kc-nav-button.active {
    background-color: #fff;
}

Navigation Parent

The default parent of the navigation buttons is the wrapping element used for the carousel (in these examples, the big rectangle with the grey background).

You can specify a different parent by using the navigationParent property. This allows you to specify a selector to any element in the page to use as the parent.

In this example, we've attached the navigation to an element that sits below the carousel wrapping element.

Forwards and Backwards Buttons

Forwards and backwards buttons can be easily implement using the API.

In this example, we have wired up two buttons to work with the carousel using the following code:

$(function(){
    // Get instance of Killer Carousel.
    var kc = $('#kc-4').data('KillerCarousel');                    
    // Bind events to buttons.
    $('#forwards-button').click(function(){
        // Call api function to move forwards.
        kc.animateToRelativeItem(1);
    });
    $('#backwards-button').click(function(){
        // Call api function to move backwards.
        kc.animateToRelativeItem(-1);
    });
});

Try them:

info