Created Image carousel

src/components/ImageCarousel/ImageCarousel.jsx

+
+import React, { Component } from 'react';
+import ModalDialog from 'components/ModalDialog';
+
+import style from './ImageCarousel.module.scss';
+
+const Arrow = ({ onArrowClick = () => { }, glyph }) => (
+    <div className={style.slideArrow}
+        onClick={onArrowClick}>
+        {glyph}
+    </div>
+);
+
+class ImageCarousel extends Component {
+
+    state = {
+        currentImageIndex: 0
+    };
+
+    previousSlide = () => {
+        const { images = [] } = this.props;
+        const lastIndex = images.length - 1;
+        const { currentImageIndex } = this.state;
+        const isFirstImage = currentImageIndex === 0;
+        const index = isFirstImage ? lastIndex : currentImageIndex - 1;
+
+        this.setState({
+            currentImageIndex: index
+        });
+    }
+
+    nextSlide = () => {
+        const { images = [] } = this.props;
+        const lastIndex = images.length - 1;
+        const { currentImageIndex } = this.state;
+        const isLastImage = currentImageIndex === lastIndex;
+        const index = isLastImage ? 0 : currentImageIndex + 1;
+
+        this.setState({
+            currentImageIndex: index
+        });
+    }
+
+    render() {
+        const { show = false, images = [], onClose = () => { } } = this.props;
+        const { currentImageIndex } = this.state;
+        const curImage = images[currentImageIndex] || {};
+        return (
+            <ModalDialog className={style.imageCarousel} show={show}>
+                <div>{`Total images: ${images.length}`}</div>
+                <div className={style.content}>
+                    <Arrow onArrowClick={this.previousSlide} glyph="&#9664;" />
+                    <img src={curImage.url} />
+                    <Arrow onArrowClick={this.nextSlide} glyph="&#9654;" />
+                </div>
+                <button className={style.closeButton} onClick={onClose}>Close</button>
+            </ModalDialog>
+        );
+    }
+
+}
+
+export default ImageCarousel;
\ No newline at end of file

src/components/ImageCarousel/ImageCarousel.module.scss

+@import '~styles/variables';
+
+.imageCarousel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 10px;
+    border-radius: 5px;
+
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 100%;
+    }
+
+    .closeButton {
+        margin: 10px;
+        color: #fff;
+        background-color: #6c757d;
+        border-color: #6c757d;
+        padding: .375rem .75rem;
+        border-radius: .25rem;
+        cursor: pointer;
+    }
+
+    .slideArrow {
+        color: #14B6D4;
+        cursor: pointer;
+        font-size: 2rem;
+    }
+
+}
\ No newline at end of file

src/components/ImageCarousel/index.js

+import ImageCarousel from './ImageCarousel';
+
+export default ImageCarousel;
\ No newline at end of file

src/components/ModalDialog/ModalDialog.jsx

 
 import React, { Component } from 'react';
 
-import styles from './ModalDialog.module.scss';
+import style from './ModalDialog.module.scss';
 
 class ModalDialog extends Component {
 
     render() {
+        const { show = false, className = '', children } = this.props;
+        if (show) {
             return (
-            <div>
-
+                <div className={style.modalDialog}>
+                    <div className={style.modelWrap}>
+                        <div className={`${style.modelContent} ${className}`}>
+                            {children}
+                        </div>
+                    </div>
                 </div>
             );
         }
+        else {
+            return null;
+        }
+    }
 
 }
 

src/components/ModalDialog/ModalDialog.module.scss

+@import '~styles/variables';
+
+.modalDialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    padding: 1rem;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 100;
+    opacity: 1;
+    overflow: hidden;
+
+    .modelWrap {
+        width: 100%;
+    }
+
+    .modelContent {
+        background-color: $primary-white;
+        max-width: 500px;
+        margin: 0 auto;
+    }
+}
\ No newline at end of file

src/components/ModalDialog/index.js

+import ModalDialog from './ModalDialog';
+
+export default ModalDialog;
\ No newline at end of file

src/pages/PDP/PDP.jsx

 import React, { Component } from 'react';
 import style from './PDP.module.scss';
 import ProductDetails from 'models/productDetail';
+import ImageCarousel from 'components/ImageCarousel';
 
 class PDPPage extends Component {
 
+    state = {
+        showImageCarousel: false
+    }
+
     componentDidMount() {
         const { match: { params: { productId } } } = this.props;
         this.props.getProductDetails(productId);
     }
 
+    toggleImageCarouselClose = () => {
+        const { showImageCarousel } = this.state;
+        this.setState({ showImageCarousel: !showImageCarousel });
+    }
+
     render() {
         const { product } = this.props;
-        const { name, image, sellingPrice } = new ProductDetails(product);
+        const { showImageCarousel } = this.state;
+
+        const { name, image, sellingPrice, images } = new ProductDetails(product);
         return (
             <section className={style.PDPPage}>
                 <div className={style.content}>
-                    <div className={style.images}>
+                    <div className={style.images} onClick={this.toggleImageCarouselClose}>
                         <img
                             src={image.url}
                             alt={image.alt}
@@ -27,6 +39,11 @@ class PDPPage extends Component {
                         <div>{`Price: ${sellingPrice}`}</div>
                     </div>
                 </div>
+                <ImageCarousel
+                    show={showImageCarousel}
+                    images={images}
+                    onClose={this.toggleImageCarouselClose}
+                />
             </section>
         );
     }