Killer Carousel Tutorial: Image carousel

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

This tutorial demonstrates how to create a basic Killer Carousel image carousel.

Assumptions

The reader has reasonable knowledge of HTML and CSS, and basic knowledge of JavaScript/jQuery.

1. Include JavaScript and CSS

First, we need to include the required JavaScript and CSS files into the <head> part of the page.

<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<!-- Include KillerCarousel CSS -->
<link href="killercarousel.css" type="text/css" rel="stylesheet" />

<!-- Include KillerCarousel JavaScript -->
<script type="text/javascript" src="killercarousel.js"></script>

The page now includes minimum files required to use Killer Carousel.

2. Define HTML for Carousel and Items

Now we need to define the HTML that will be turned into a Killer Carousel.

A carousel is defined in two basic parts:

A main parent 'wrapping' element that becomes the box within which the carousel is displayed
Several child item wrappers, which sit inside the parent. These will become the carousel items and contain the images and other content that we may wish to add.

For convenience, two CSS classes have already been defined to help get these two parts working, .kc-wrap and .kc-item. These are defined in the included killercarousel.css file. They can be adjusted to suit your needs e.g. to change the background image or to change the size of the carousel items.

Here we define a carousel with 10 carousel items, each carousel item contains an image:

<!-- Main wrapping parent. -->
<div class = "kc-wrap">

    <!-- Carousel items follow. -->

    <div class="kc-item">
        <img src="image1.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image2.jpg" alt = "" >
    </div> 
    <div class="kc-item">
        <img src="image3.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image4.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image5.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image6.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image7.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image8.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image9.jpg" alt = "" >
    </div>
    <div class="kc-item">
        <img src="image10.jpg" alt = "" >
    </div>

</div>

That looks simple enough, but if we want the images to change size correctly on older browsers like IE8 that don't support CSS transforms, we just need to add an extra little snippet of CSS:

<style type = "text/css">            
    /* CSS for images inside item wrapper */
    .kc-item img {
        position:absolute;
        pointer-events: none;   /* Make images non-selectable. */
        width:100%;             /* Make images expand to wrapper size. */
    }
</style>

This will ensure the images stretch to match the size of the .kc-item elements as they change size.

3. Start the Carousel

The final step is to start the Killer Carousel jQuery plugin to turn that HTML code into a spinning carousel. This is done my adding the following snipped of JavaScript into the <head> part of the page:

$(function() {
    $('.kc-wrap').KillerCarousel({
        // Width of carousel.
        width: 800, 
        // Item spacing in 3D (modern browsers) modes.
        spacing3d: 120,    
        // Item spacing in 2D (old browsers) modes. 
        spacing2d: 120,
        showShadow:true,
        showReflection: true
    });
});

Full Code Listing

<!doctype html>
<html>  
    <head>
        <title>Killer Carousel Image Carousel</title>

        <!-- Include jQuery. -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        
        <!-- Include KillerCarousel CSS. -->
        <link href="killercarousel.css" type="text/css" rel="stylesheet" />
        
        <!-- Include KillerCarousel JavaScript. -->
        <script type="text/javascript" src="killercarousel.js"></script>
       
        <!-- Style for the carousel items. -->
        <style type = "text/css">

            /* CSS for images inside item wrapper */
            .kc-item img {
                position:absolute;
                pointer-events: none;   /* Make images non-selectable. */
                width:100%;             /* Make images expand to wrapper size (used in 2d modes). */
            }
        </style>

        <script type = "text/javascript">
		
            // Create the carousel.
            $(function() {
                $('.kc-wrap').KillerCarousel({
                    // Default natural width of carousel.
                    width: 800,
                    // Item spacing in 3d (has CSS3 3d) mode.
                    spacing3d: 120,
                    // Item spacing in 2d (no CSS3 3d) mode. 
                    spacing2d: 120,
                    showShadow: true,
                    showReflection: true                    
                });
            });
        </script>        
    </head>
	
    <body>

        <!-- The carousel wrapper. -->
        <div class = "kc-wrap">

            <!-- Carousel items follow -->
            <div class="kc-item">
                <img src="images/image1.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image2.jpg" alt = "" >
            </div> 
            <div class="kc-item">
                <img src="images/image3.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image4.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image5.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image6.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image7.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image8.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image9.jpg" alt = "" >
            </div>
            <div class="kc-item">
                <img src="images/image10.jpg" alt = "" >
            </div>

        </div>
                  
    </body>
</html>

info