Carousel - 图1

  1. import React, { Component } from 'react';
  2. import {
  3.   Carousel,
  4.   CarouselItem,
  5.   CarouselControl,
  6.   CarouselIndicators,
  7.   CarouselCaption
  8. } from 'reactstrap';
  10. const items = [
  11.   {
  12.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  13.     altText: 'Slide 1',
  14.     caption: 'Slide 1'
  15.   },
  16.   {
  17.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  18.     altText: 'Slide 2',
  19.     caption: 'Slide 2'
  20.   },
  21.   {
  22.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  23.     altText: 'Slide 3',
  24.     caption: 'Slide 3'
  25.   }
  26. ];
  28. class Example extends Component {
  29.   constructor(props) {
  30.     super(props);
  31.     this.state = { activeIndex: 0 };
  32.     this.next = this.next.bind(this);
  33.     this.previous = this.previous.bind(this);
  34.     this.goToIndex = this.goToIndex.bind(this);
  35.     this.onExiting = this.onExiting.bind(this);
  36.     this.onExited = this.onExited.bind(this);
  37.   }
  39.   onExiting() {
  40.     this.animating = true;
  41.   }
  43.   onExited() {
  44.     this.animating = false;
  45.   }
  47.   next() {
  48.     if (this.animating) return;
  49.     const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
  50.     this.setState({ activeIndex: nextIndex });
  51.   }
  53.   previous() {
  54.     if (this.animating) return;
  55.     const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
  56.     this.setState({ activeIndex: nextIndex });
  57.   }
  59.   goToIndex(newIndex) {
  60.     if (this.animating) return;
  61.     this.setState({ activeIndex: newIndex });
  62.   }
  64.   render() {
  65.     const { activeIndex } = this.state;
  67.     const slides = items.map((item) => {
  68.       return (
  69.         <CarouselItem
  70.           onExiting={this.onExiting}
  71.           onExited={this.onExited}
  72.           key={item.src}
  73.         >
  74.           <img src={item.src} alt={item.altText} />
  75.           <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
  76.         </CarouselItem>
  77.       );
  78.     });
  80.     return (
  81.       <Carousel
  82.         activeIndex={activeIndex}
  83.         next={this.next}
  84.         previous={this.previous}
  85.       >
  86.         <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
  87.         {slides}
  88.         <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
  89.         <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
  90.       </Carousel>
  91.     );
  92.   }
  93. }
  96. export default Example;
  1. Carousel.propTypes = {
  2.   // the current active slide of the carousel
  3.   activeIndex: PropTypes.number,
  4.   // a function which should advance the carousel to the next slide (via activeIndex)
  5.   next: PropTypes.func.isRequired,
  6.   // a function which should advance the carousel to the previous slide (via activeIndex)
  7.   previous: PropTypes.func.isRequired,
  8.   // controls if the left and right arrow keys should control the carousel
  9.   keyboard: PropTypes.bool,
  10.   /* If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on
  11.    * mouseleave. If set to false, hovering over the carousel won't pause it. (default: "hover")
  12.    */
  13.   pause: PropTypes.oneOf(['hover', false]),
  14.   // Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
  15.   // This is how bootstrap defines it... I would prefer a bool named autoplay or something...
  16.   ride: PropTypes.oneOf(['carousel']),
  17.   // the interval at which the carousel automatically cycles (default: 5000)
  18.   interval: PropTypes.oneOfType([
  19.     PropTypes.number,
  20.     PropTypes.string,
  21.     PropTypes.bool,
  22.   ]),
  23.   children: PropTypes.array,
  24.   // called when the mouse enters the Carousel
  25.   mouseEnter: PropTypes.func,
  26.   // called when the mouse exits the Carousel
  27.   mouseLeave: PropTypes.func,
  28.   // controls whether the slide animation on the Carousel works or not
  29.   slide: PropTypes.bool,
  30.   cssModule: PropTypes.object,
  31. };

CarouselItem Properties

  1. CarouselItem.propTypes = {
  2.   ...Transition.propTypes,
  3.   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  4.   in: PropTypes.bool,
  5.   cssModule: PropTypes.object,
  6.   children: PropTypes.node,
  7.   slide: PropTypes.bool,
  8. };

CarouselControl Properties

  1. CarouselControl.propTypes = {
  2.   direction: PropTypes.oneOf(['prev', 'next']).isRequired,
  3.   onClickHandler: PropTypes.func.isRequired,
  4.   cssModule: PropTypes.object,
  5.   directionText: PropTypes.string
  6. };

CarouselIndicators Properties

  1. CarouselIndicators.propTypes = {
  2.   items: PropTypes.array.isRequired,
  3.   activeIndex: PropTypes.number.isRequired,
  4.   cssModule: PropTypes.object,
  5.   onClickHandler: PropTypes.func.isRequired
  6. };

CarouselCaption Properties

  1. CarouselCaption.propTypes = {
  2.   captionHeader: PropTypes.string,
  3.   captionText: PropTypes.string.isRequired,
  4.   cssModule: PropTypes.object
  5. };

For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledCarousel does not require previous, next nor activeIndex props to work. Anything provided to a normal Carousel can also be provided to UncontrolledCarousel, overriding the control UncontrolledCarousel provides. Additionally, you can hide the controls by passing false to the controls prop and you can disable the indicators by passing false to the indicators prop; both are visible by default. Autoplay (ride="carousel") is enabled by default, you can disable it by passing false to the autoPlay prop.

Carousel - 图2

  1. import React from 'react';
  2. import { UncontrolledCarousel } from 'reactstrap';
  4. const items = [
  5.   {
  6.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  7.     altText: 'Slide 1',
  8.     caption: 'Slide 1',
  9.     header: 'Slide 1 Header'
  10.   },
  11.   {
  12.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  13.     altText: 'Slide 2',
  14.     caption: 'Slide 2',
  15.     header: 'Slide 2 Header'
  16.   },
  17.   {
  18.     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
  19.     altText: 'Slide 3',
  20.     caption: 'Slide 3',
  21.     header: 'Slide 3 Header'
  22.   }
  23. ];
  25. const Example = () => <UncontrolledCarousel items={items} />;
  27. export default Example;

Same as Carousel (except children) can be overridden plus the following

  1. UncontrolledCarousel.propTypes = {
  2.   items: PropTypes.array.isRequired,
  3.   indicators: PropTypes.bool, // default: true
  4.   controls: PropTypes.bool, // default: true
  5.   autoPlay: PropTypes.bool, // default: true
  6. };

Carousel - 图3

  1. import React, { Component } from 'react';
  2. import {
  3.   Carousel,
  4.   CarouselItem,
  5.   CarouselControl,
  6.   CarouselIndicators,
  7.   CarouselCaption
  8. } from 'reactstrap';
  10. const items = [
  11.   {
  12.     id: 1,
  13.     altText: 'Slide 1',
  14.     caption: 'Slide 1'
  15.   },
  16.   {
  17.     id: 2,
  18.     altText: 'Slide 2',
  19.     caption: 'Slide 2'
  20.   },
  21.   {
  22.     id: 3,
  23.     altText: 'Slide 3',
  24.     caption: 'Slide 3'
  25.   }
  26. ];
  28. class Example extends Component {
  29.   constructor(props) {
  30.     super(props);
  31.     this.state = { activeIndex: 0 };
  32.     this.next = this.next.bind(this);
  33.     this.previous = this.previous.bind(this);
  34.     this.goToIndex = this.goToIndex.bind(this);
  35.     this.onExiting = this.onExiting.bind(this);
  36.     this.onExited = this.onExited.bind(this);
  37.   }
  39.   onExiting() {
  40.     this.animating = true;
  41.   }
  43.   onExited() {
  44.     this.animating = false;
  45.   }
  47.   next() {
  48.     if (this.animating) return;
  49.     const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
  50.     this.setState({ activeIndex: nextIndex });
  51.   }
  53.   previous() {
  54.     if (this.animating) return;
  55.     const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
  56.     this.setState({ activeIndex: nextIndex });
  57.   }
  59.   goToIndex(newIndex) {
  60.     if (this.animating) return;
  61.     this.setState({ activeIndex: newIndex });
  62.   }
  64.   render() {
  65.     const { activeIndex } = this.state;
  67.     const slides = items.map((item) => {
  68.       return (
  69.         <CarouselItem
  70.           className="custom-tag"
  71.           tag="div"
  72.           key={item.id}
  73.           onExiting={this.onExiting}
  74.           onExited={this.onExited}
  75.         >
  76.           <CarouselCaption className="text-danger" captionText={item.caption} captionHeader={item.caption} />
  77.         </CarouselItem>
  78.       );
  79.     });
  81.     return (
  82.       <div>
  83.         <style>
  84.           {
  85.             `.custom-tag {
  86.                 max-width: 100%;
  87.                 height: 500px;
  88.                 background: black;
  89.               }`
  90.           }
  91.         </style>
  92.         <Carousel
  93.           activeIndex={activeIndex}
  94.           next={this.next}
  95.           previous={this.previous}
  96.         >
  97.           <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
  98.           {slides}
  99.           <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
  100.           <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
  101.         </Carousel>
  102.       </div>
  103.     );
  104.   }
  105. }
  107. export default Example;