Carousel command
Make content go around and around … and around.
Basic Usage (HTML)
data-jkit="[carousel:autoplay=no]"
Advanced Init (JavaScript)
$('#myelement').jKit('carousel', { 'autoplay': 'no' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| autoplay | “yes” or “no” | yes | Should the carousel automatically play on init? |
| limit | Int | 5 | How many slides to display |
| animation | “fade”, “slide” or “none” | grow | The type of animation used for the transition |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
| interval | Int (Milliseconds) | 5000 | In which interval to replace the slide |
| prevhtml | HTML | < | The HTML for the prev button |
| nexthtml | HTML | > | The HTML for the next button |
Events
| Event | Description |
|---|---|
| shownext | Triggered when the next entry is being shown |
| showprev | Triggered when the previous entry is being shown |
Examples
Basic example:
Simple example with some divs that contain text:
DIV 1 …
DIV 2 …
DIV 3 …
DIV 4 …
DIV 5 …
DIV 6 …
DIV 7 …
Source:
<div class="carousel" data-jkit="[carousel]"> <div class="carousel-item"> <div>DIV 1 ...</div> </div> <div class="carousel-item"> <div>DIV 2 ...</div> </div> <div class="carousel-item"> <div>DIV 3 ...</div> </div> <div class="carousel-item"> <div>DIV 4 ...</div> </div> <div class="carousel-item"> <div>DIV 5 ...</div> </div> <div class="carousel-item"> <div>DIV 6 ...</div> </div> <div class="carousel-item"> <div>DIV 7 ...</div> </div> </div>
Example CSS
div.carousel {
overflow: hidden;
pointer-events: none;
text-align: center;
width: 100%;
height: 150px;
}
div.carousel-item {
float: left;
width: 20%;
height: 150px;
background: #E01B49;
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 200%;
}
div.carousel-item div {
padding: 20px;
border: 1px #fff solid;
height: 110px;
}
a.jkit-carousel-prev, a.jkit-carousel-next {
width: 40px;
background: #eee;
border: 1px #999 solid;
color: #333;
padding: 4px;
cursor: pointer;
cursor: hand;
margin-top: 10px;
text-align: center;
user-select: none;
}
a.jkit-carousel-prev:hover, a.jkit-carousel-next:hover {
background: #fff;
border: 1px #666 solid;
color: #000;
}
a.jkit-carousel-prev {
float: left;
}
a.jkit-carousel-next {
float: right;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]