Semantic-ui-react: I want carousel in semantic ui react

[AkashMishraMS]

I want carousel in semantic ui react but I am unable to see there please help.

[levithomason]

There is no carousel currently. We're a bit tied here as there is a fair amount of CSS required for this and we do not control the CSS in this repo. I see three options:

1. Create a carousel in https://github.com/Semantic-Org/Semantic-UI first and port it to React. The hardest path requiring the most time and least likely to succeed.
2. Create a carousel in a future version of SUIR, after we port to CSS in JS (see #2710 experiments). This would be easier and much more likely to succeed, however, it may be a long time before have that effort complete.
3. Create an "Addon" carousel in SUIR from existing smaller components. This is surely the shortest and easiest path. We just may have to do some styling in JS to accomplish it.

I have no availability for this, but I'm willing to help with PRs.

[brianespinosa]

I've got a carousel component that I've created that is not necessarily SUI structured markup, but easily creates carousel slides from each rendered child. I'd consider open sourcing it into SUIR but the work to do this would not be something I would be able to do until we achieve #2 above.

[levithomason]

Yes, the DateTime suffers from similar difficulties. Owning our own styling will be a huge pick me up.

[jermsam]

I need the

semantic-ui-react

carousel too

[xReaven]

Hi,
Is there any update about it ? Any plans within 6 months / 1 year ?

[brianespinosa]

@xReaven not until v2 of SUIR is done. This is probably at least 6 months out.

For future reference, If there is ever any work happening on a task, it will show up in the task history as linked pull requests.

[malixsys]

Not a Carousel pre se, but works well in a Feed.Extra

Parent

          <Feed.Extra>
            <Carousel photos={item.Photos} />
          </Feed.Extra>

"Carousel"

class Viewer extends React.PureComponent {
  state = {
    index: this.props.index
  };

  componentDidMount() {
    document.addEventListener('keydown', this.handleKey, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKey, false);
  }

  handleKey = ({ key }) => {
    if (key === 'ArrowRight') {
      this.flip(1);
    }
    if (key === 'ArrowLeft') {
      this.flip(-1);
    }
  };

  flip(val) {
    this.setState(({ index }) => {
      let target = index + val;
      const { photos } = this.props;
      if (target >= photos.length) {
        target = 0;
      }
      if (target < 0) {
        target = photos.length - 1;
      }
      return { index: target };
    });
  }

  render() {
    const { photos } = this.props;
    const { index } = this.state;
    const { path } = photos[index];
    const url = getUrl(path);
    return (
      <Modal.Content image scrolling>
        <Image wrapped src={url} />
      </Modal.Content>
    );
  }
}

const Photo = ({ path, photos, index }) => {
  const url = getUrl(path);
  return (
    <Modal
      size="fullscreen"
      trigger={<Image rounded src={url} alt="general" />}
      basic
      scrolling
      content={<Viewer photos={photos} index={index} />}
      actions={[{ key: 'done', content: 'OK', positive: true }]}
    />

  );
};

const Carousel = ({ photos }) => (
  <Image.Group size="small">
    {photos && photos.map && photos.map(({ meta: { asset }, path }, index) => (
      <Photo key={asset} path={path} photos={photos} index={index} />
    ))}
  </Image.Group>
);

export default Carousel;

[layershifter]

I recently added a prototype (#3372) how to combine SUIR and pure-react-carousel, it provides a well designed components for carousels.

CodeSandbox: https://codesandbox.io/s/43pv7wm6n9
Github: https://github.com/layershifter/semantic-ui-react-with-pure-react-carousel

For now, this looks like a best possible solution because Carousel will be not implemented as a separate component in SUIR in near future.

[AramRafeq]

i have created a carousel component for semantic ui react you can check it out
https://www.npmjs.com/package/semantic-ui-carousel-react

[anubhavcse08]

i have created a carousel component for semantic ui react you can check it out
https://www.npmjs.com/package/semantic-ui-carousel-react

@AramRafeq
Hey Cool, It's working fine dude. But I need ShownextPrev over of the slider which is left and right side. Can you please help where I need to change the CSS. Thanks