react corousel

1import React, { useState } from 'react';
2import {
3  Carousel,
4  CarouselItem,
5  CarouselControl,
6  CarouselIndicators,
7  CarouselCaption
8} from 'reactstrap';
9
10const 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];
27
28const Example = (props) => {
29  const [activeIndex, setActiveIndex] = useState(0);
30  const [animating, setAnimating] = useState(false);
31
32  const next = () => {
33    if (animating) return;
34    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
35    setActiveIndex(nextIndex);
36  }
37
38  const previous = () => {
39    if (animating) return;
40    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
41    setActiveIndex(nextIndex);
42  }
43
44  const goToIndex = (newIndex) => {
45    if (animating) return;
46    setActiveIndex(newIndex);
47  }
48
49  const slides = items.map((item) => {
50    return (
51      <CarouselItem
52        onExiting={() => setAnimating(true)}
53        onExited={() => setAnimating(false)}
54        key={item.src}
55      >
56        <img src={item.src} alt={item.altText} />
57        <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
58      </CarouselItem>
59    );
60  });
61
62  return (
63    <Carousel
64      activeIndex={activeIndex}
65      next={next}
66      previous={previous}
67    >
68      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
69      {slides}
70      <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
71      <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
72    </Carousel>
73  );
74}
75
76export default Example;
77

1import React from 'react';
2import 'bootstrap/dist/css/bootstrap.css';
3import Carousel from 'react-bootstrap/Carousel';
4
5export default function Corousal() {
6const images = ["slide-1.jpg","slide-2.jpg"]
7
8const corousalComponent = images.map((image,i) => {
9return(
10		<Carousel.Item interval={1500}>
11			<img className="img-slide " src={require("../images/"+image).default} alt="slide"/>
12		</Carousel.Item>)
13})
14return (
15	<div style={{ display: 'block'}}>
16	<Carousel>
17		{corousalComponent}
18	</Carousel>
19	</div>
20);
21}