feat(snippets): Add carousel component

snippets/Carousel.md

@@ -0,0 +1,90 @@
+### Carousel
+
+Renders a carousel component.
+
+The `active` property on the component state is set to `0`th index as default.
+
+Use an object, `style`, to hold the styles for the individual components.
+
+Create a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
+Create another method `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
+first renders (on `ComponentDidMount`).
+  
+In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel
+item while mapping over and apply the combined style to the carousel item component accordingly.
+  
+Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
+props along with the computed styles.
+
+```jsx
+
+class Carousel extends React.Component {
+   constructor(props) {
+    super(props);
+    this.state = {
+      active: 0
+    };
+    this.scrollInterval = null;
+    this.style = {
+      carousel: {
+        position: "relative"
+      },
+      carouselItem: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      visible: {
+        visibility: "visible"
+      }
+    };
+  }
+  
+ componentDidMount() {
+    this.changeItem();
+ }
+
+ setActiveItem = () => {
+   const { carouselItems } = this.props;
+   this.setState(prevState => ({
+    active: (prevState.active + 1) % carouselItems.length
+    }),
+     this.changeItem
+   );
+ };
+
+ changeItem = () => {
+   this.scrollInterval = setTimeout(
+    this.setActiveItem, 2000);
+ };
+
+  render() {
+    const { carouselItems, ...rest } = this.props;
+    const { active } = this.state;
+    const { visible, carousel, carouselItem } = this.style;
+    return (
+      <div style={carousel}>
+        {carouselItems.map((item, index) => {
+          const activeStyle = active === index ? visible : {};
+          return React.cloneElement(item, {
+            ...rest,
+            style: {
+              ...carouselItem,
+              ...activeStyle
+            }
+          });
+        })}
+      </div>
+    );
+  }
+}
+
+```
+
+```jsx
+
+ ReactDOM.render(<Carousel carouselItems = {[
+    <div>carousel item 1</div>,
+    <div>carousel item 2</div>,
+    <div>carousel item 3</div>]} />, document.getElementById('root'));
+    
+ ```