Transitions
Carousel supports transition effects when changing slides. You can use the built-in transitions or create your own using CSS and the transition option.
How It Works
When the Carousel navigates between pages, it applies CSS classes to the slides involved in the transition:
- The incoming slide receives a class in the form
f-{name}In, along with a direction modifier —from-nextorfrom-prev— to indicate which direction the navigation came from. - The outgoing slide receives a class in the form
f-{name}Out, along withto-nextorto-prev.
Where {name} is the value of the transition option.
The transition Option
Use the transition option to specify the animation name:
Carousel(container, {
transition: "fade",
}).init();The following transitions are built in:
| Name | Description |
|---|---|
fade | Slides fade in and out (default) |
crossfade | Slides crossfade simultaneously |
slide | Slides move horizontally in and out |
Custom Transitions
To define a custom transition, add CSS rules that target the class names the Carousel applies during navigation. Use f-{name}In and f-{name}Out combined with the direction modifiers:
/* Incoming slide — navigating forward */
.f-myTransitionIn.from-next {
animation: 0.5s ease f-slideInNextX;
}
/* Incoming slide — navigating backward */
.f-myTransitionIn.from-prev {
animation: 0.5s ease f-slideInPrevX;
}
/* Outgoing slide — navigating forward */
.f-myTransitionOut.to-next {
animation: 0.25s ease f-fadeOut;
}
/* Outgoing slide — navigating backward */
.f-myTransitionOut.to-prev {
animation: 0.25s ease f-fadeOut;
}Then enable it with the transition option:
Carousel(container, {
transition: "myTransition",
}).init();Available Keyframes
Carousel ships with several reusable keyframe animations you can reference:
| Keyframe | Description |
|---|---|
f-slideInNextX | Slide in horizontally (forward) |
f-slideInPrevX | Slide in horizontally (backward) |
f-slideInNextY | Slide in vertically (forward) |
f-slideInPrevY | Slide in vertically (backward) |
f-fadeIn | Fade in |
f-fadeOut | Fade out |
You can also define your own @keyframes from scratch and reference them instead.
Example
The fadeAndSlide transition creates a layered effect: the incoming slide springs in from the side using a bouncy easing, while the outgoing slide fades out quickly. This gives the navigation a sense of depth.
CSS
.f-fadeAndSlideIn.from-next {
animation: 0.5s cubic-bezier(0.22, 1, 0.482, 1.036) f-slideInNextX;
}
.f-fadeAndSlideIn.from-prev {
animation: 0.5s cubic-bezier(0.22, 1, 0.482, 1.036) f-slideInPrevX;
}
.f-fadeAndSlideOut.to-next {
animation: 0.25s ease f-fadeOut;
}
.f-fadeAndSlideOut.to-prev {
animation: 0.25s ease f-fadeOut;
}JavaScript
Carousel(container, {
transition: "fadeAndSlide",
}).init();