Star Plugins logo

Killer Carousel

Current: 1.2 rev 1501161200, 16 January 2015

Virgin of the Rocks 1486
Portrait of a Musician 1490
Adoration of the Magi 1481
La belle ferronnière 1496
Madonna of the Carnation 1480
Madonna of Laroque 1503
Benois Madonna 1478
Mona Lisa 1517
Portrait of a man in red chalk 1512

Powerful, responsive, touch-enabled carousel for modern websites and devices, plus legacy browser 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.

Buy Trial Releases

Features

  • 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

Examples

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.

Properties

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. infiniteLoop: true

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 .kc-shadow.. You can create your own shadow image if desired. false
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
renderer2d string The rendering function to use in 2D mode. Options are currently, render2dCarousel, render2dBasic and render2dFlow render2dCarousel
renderer3d string The rendering function to use in 3D mode. other options are currently, render3dCarousel and render3dFlow. If you want to switch off 3D rendering, you can specify null. render3dCarousel
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
navigationHorizontalPos
from 1.1 rev 1311271343		 string Sets the horizontal position of the navigation buttons e.g. 'middle', 'left:10px', 'right:15px'. right:15px
navigationVerticalPos
from 1.1 rev 1311271343		 string Sets the vertical position of the navigation buttons e.g. 'middle', 'top:10px', 'bottom:15px'. bottom:15px
navigationParent
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. ''