ClassCarousel

A lightweight(2.23kb minified) css based carousel bootstrap download
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24
  • Item 25
  • Item 26
  • Item 27
  • Item 28
  • Item 29
  • Item 30
  • Item 31
  • Item 32
  • Item 33
  • Item 34
  • Item 35
  • Item 36
  • Item 37
  • Item 38
  • Item 39
  • Item 40
  • Item 41

With this plugin you can create slide-shows, content tickers and any other kind of carousel for websites, based on css animations. The jQuery plugin will add classes to each of the selected items. Each of these classes has info about it's current position in the carousel. You can create positions for those locations, and next css transition will do the work for you. It's lightweight and simply written to be readable, tiny (2.23kb minified) and understandable. With the events and controls you should be able to extend it for your needs. Enjoy and let me know if there are questions / suggestions.

How it works

You can put any kind of content inside it's items. Do mind that the items are actually rendered all the time, so for instance, dont play movies constantly. Instead use the jQuery events to load heavy content on activation of the slide, in the meantime you could show a preview image while it's not active.

When the plugin is activated, it will put classes onto each element it matches, based on there position. When you use the controls to change to next or previous item/set, the classes of the elements will change according to your choice of action. The elements wont move by javascript, but their locations need to be defined in css. (The css transition property will then do all the action for you)

In CSS you can define positions for each of the active locations, as well as the hidden-left/-right location. When after that, css transition is applied, the items will slide intro there new locations according to your control ;-)

Class shifting example

I've made some basic examples in the examples section. Be sure to check that before you start! You can probably use one of them as your bootstrap.

Download

You can download the latest version here

Getting started

Use the plugin as follows:

$('.class-carousel').classCarousel();

Plugin options

visible
number of 'visible' items in the carousel; eg. loc_1, loc_2,
offset
provides a starting offset
cycle_set_timout
Timeout between iterations when user cycles a set.
cycle
cycle carousel? false = stop at end of items
child_selector
what child's should be selected as items?

Default configuration

var settings = {
	visible: 4,
	offset: 0,
	cycle_set_timout: 50,
	cycle: true,
	child_selector: '.items > *'
};

Examples

Horizontal example
Vertical example
Funky example
Simple ticker example

Frequently asked questions

None yet actualy, but i would love to hear your questions or feedback.

Leave your questions and/or feedback here.