Slideshow Mode
React Chrono includes a slideshow feature that automatically transitions through timeline cards. This is available in all timeline modes: VERTICAL
, VERTICAL_ALTERNATING
, and HORIZONTAL
.
Enabling Slideshow
To activate the slideshow, add the slideShow
boolean prop to the <Chrono>
component and set it to true
.
<Chrono items={items} slideShow={true} />
Configuring Slide Duration
The slideItemDuration
prop controls how long each timeline card is displayed before transitioning to the next. This value is specified in milliseconds.
<Chrono items={items} slideShow={true} slideItemDuration={3000} /> // Each card shows for 3 seconds
Slideshow Animation Types
React Chrono offers different animation types for slideshow transitions. The component automatically selects a default type based on the active timeline mode
:
reveal
: (Default forVERTICAL
andHORIZONTAL
modes) Timeline cards are revealed one after another, typically with a fade-in or similar effect.slide_from_sides
: (Default forVERTICAL_ALTERNATING
mode) Timeline cards animate in from alternating sides of the screen, complementing the alternating layout.slide_in
: (Can be manually set if needed, though often covered byreveal
orslide_from_sides
depending on context) Cards slide into view. The exact behavior might vary.
While these are default behaviors, specific customization of animation types beyond the defaults might require deeper configuration or CSS overrides if supported by the library version.
Controlling the Slideshow
Users can typically control the slideshow via the control panel (if enabled):
- Play/Pause Button: Starts or stops the automatic progression of the slideshow.
- Escape Key: Pressing the "Escape" key on the keyboard usually stops/cancels the slideshow.
Example Usage
Here’s how to set up a basic slideshow:
import React from "react";
import { Chrono } from "react-chrono";
const slideshowItems = [
{
title: "2020 - The Beginning",
cardTitle: "Project Inception",
cardSubtitle: "Ideas and Concepts",
cardDetailedText: "Initial brainstorming and planning phase for the new project.",
media: {
type: "IMAGE",
source: {
url: "https://picsum.photos/id/1018/1000/600", // Placeholder image
},
},
},
{
title: "2021 - Development",
cardTitle: "Building the Core",
cardSubtitle: "Coding and Prototyping",
cardDetailedText: "Intensive development period, focusing on core features and functionality.",
media: {
type: "IMAGE",
source: {
url: "https://picsum.photos/id/1015/1000/600", // Placeholder image
},
},
},
{
title: "2022 - Launch",
cardTitle: "Product Release",
cardSubtitle: "Going Live",
cardDetailedText: "Successful launch of the product to the market, gathering user feedback.",
media: {
type: "IMAGE",
source: {
url: "https://picsum.photos/id/1016/1000/600", // Placeholder image
},
},
},
];
function MyTimelineSlideshow() {
return (
<Chrono
items={slideshowItems}
mode="HORIZONTAL" // Example mode
slideShow={true}
slideItemDuration={4000} // Each item displays for 4 seconds
/>
);
}
export default MyTimelineSlideshow;
In this example, the timeline will automatically cycle through slideshowItems
, displaying each for 4 seconds.
The slideshow feature is excellent for creating automated presentations or guided tours of timeline events, making your content more dynamic and engaging.