Powerful, responsive, touch-enabled carousel for modern websites and devices, plus full legacy support
Killer Carousel meets the needs of professional developers who need a responsive, touch-enabled, versatile and visually impressive carousel. It uses the power of the latest browsers, but retains legacy support for the old ones too.
No matter what target device screen size, Killer Carousel will adapt itself within parameters you specify to ensure your content is presented optimally to your site visitors.
- Rendering modes - Choose different ways of displaying your content, 2d/3d, 'Cover Flow', HTML slides etc
- Touch-enabled - Quickly swipe through carousels on touch-enabled devices
- Extra responsive - Not just size adjustment; rendering modes and effects are changed to suit the target device
- Full HTML carousel items - Use full HTML content, Canvas, etc., not just images
- Reflections and shadows - Add a sense of depth and realism to your carousels
- Legacy browser support - Old browsers switch to rendering modes matched to their capabilities
- Infinite or finite carousels - Allow users to loop forever or stop at each end
- Callbacks and API calls - Allows developers to add their own behaviour
We have created a rich set of examples to demonstrate how various options and effects can be implemented. Fluid layouts are used in all cases to illustrate how Killer Carousel will work in responsive websites.
The examples are standalone as this makes it easier to study the source code without pages of irrelevant HTML. Examples open in a new window/tab.
- Tutorial: image carousel
- Fixed size carousel
- Responsive carousel
- HTML carousel items
- Rendering modes
Various properties are available to change the look and feel of Killer Carousel.
Text values/strings should be surrounded by quotes e.g.
renderer2d: 'render2dCarousel'. Numbers, true and false, should not e.g.
List of Properties
|Property Name||Type||Description||Default Value|
|frontItemIndex||number||Index of the item placed at the front of the carousel on start up.||0|
|infiniteLoop||boolean||Makes the carousel an infinitely long loop, i.e. the the last item is displayed next the first item.||false|
|scale||number||Applies a finale scale (percentage) to the carousel's calculated size. Useful if you want to duplicate a carousel setup, but at different sizes for different devices.||100|
|spacing2d||number||Distance between carousel item in 2D modes.||200|
|spacing3d||number||Distance between carousel item in 3D modes.||200|
|horizon||string||CSS vertical position of the horizon line within the wrapping parent. You can alter this to move the carousel up or down.||top:50%|
|itemAlign||string||Defines which edge of the carousel items line up with the horizon line: top, middle, or bottom.||middle|
|showShadow||boolean||Displays the shadow graphic around carousel items.
The CSS for the shadow is defined in killercarousel.css in class
|showReflection||boolean||Displays a reflection underneath carousel items. There are some limitations to the reflection: it only works on Canvas-enabled browsers, and it it will only reflect the first image within the carousel item. For other scenarios, you could should build reflection into the Carousel item manually.||false|
The rendering function to use in 2D mode. Options are currently,
The rendering function to use in 3D mode. other options are currently,
|fadeEdgeItems||boolean||Makes the items at the edge for the carousel fade out smoothly before they disappear. This is useful for linear style carousels where they are defined as a smaller width than the wrapping parent||false|
|perspectiveOrigin||string||Sets the vanishing point in 3D modes. Generally, the 50% horizontal value will not need to change, but by altering the vertical value (in pixels), you can create different perspective effects. The default 0px vertical position represents having your eyes perfectly level with the horizon line. By setting a value of, say, -100px, this would be equivalent to raising your eye level.||50% 0px|
|autoChangeDirection||number||Sets the direction of automatic timed movement through the carousel (e.g. for a slide show). Accetpable values are -1, 0, 1.||0|
|autoChangeDelay||number||Sets the delay (milliseconds) between automatic movement of the carousel.||4000|
|useMouseWheel||boolean||Sets use of the mouse wheel for navigation through the carousel.||true|
|showNavigation||boolean||Turns on the navigation buttons.||false|
from 1.1 rev 1311271343
|string||Sets the horizontal position of the navigation buttons e.g. 'middle', 'left:10px', 'right:15px'.||right:15px|
from 1.1 rev 1311271343
|string||Sets the vertical position of the navigation buttons e.g. 'middle', 'top:10px', 'bottom:15px'.||bottom:15px|
from 1.1 rev 1311271343
|string||Selector to an element that will act as the parent of the navigation buttons e.g. '#my-element'. Allows navigation buttons to appear anywhere on the page. Empty string defaults to using the carousel parent.||''|