Carousel View Source



The carousel component is used to display multiple images.



Imports



Import React and the Carousel Component, as well as the dispatchCustomEvent function.

0
import * as React from "react";
1
import { 
2
  GlobalCarousel, 
3
  dispatchCustomEvent 
4
} from "slate-react-system";



Usage



Declare the component at the root level of your document (e.g. in index.js or App.js) so it is accessible throughout and will not get buried in the DOM tree.

Optionally, use style to style the background.

0
class App extends React.Component {
1
  render() {
2
    return (
3
      <React.Fragment>
4
        <GlobalCarousel />
5
        {this.props.children}
6
      </React.Fragment>
7
    );
8
  }
9
}



Carousel




0
class ExampleOne extends React.Component {
1
  componentDidMount() {
2
    // NOTE(jim):
3
    // The global carousel component takes an array of JSX elements
4
    // You can style them however you like.
5
    const style = { 
6
      maxHeight: "80%", 
7
      maxWidth: "80%", 
8
      display: "block" 
9
    };
10
    const slides = [
11
      {component: <img key="i-1" src="/static/art-v2-social.png" style={style} />},
12
      {component: <img key="i-2" src="/static/art-v1-ryan-prudhomme-6.png" style={style} />}
13
    ];
14
    System.dispatchCustomEvent({
15
      name: "slate-global-create-carousel",
16
      detail: { slides },
17
    });
18
  }
19
  _handleOpen = () => {
20
    dispatchCustomEvent({ 
21
      name: "slate-global-open-carousel"
22
      detail: { index: 0 } 
23
    });
24
  };
25
  _handleClose = () => {
26
    dispatchCustomEvent({ name: "slate-global-close-carousel" });
27
  };
28
  render() {
29
    return (
30
      <System.ButtonSecondary full onClick={this._handleOpen}>
31
        Open Carousel
32
      </System.ButtonSecondary>
33
    );
34
  }
35
}



Accepted React Properties



Notifications
NameTypeDefaultDescription
style
Object
{}
Style object used to style the carousel background (color, etc.)



Accepted Create Carousel Properties



Note that these properties are passed through a custom event rather than as react properties.

Notifications
NameTypeDefaultDescription
slides
Component[]Component
null
Components to be rendered inside the carousel
index
number
0
Index of the initial slide
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source