Image Slider

components/product/ProductSlider/ProductSlider.tsx

@@ -0,0 +1,34 @@
+import { FC, useState } from 'react'
+import React from 'react'
+import SwipeableViews from 'react-swipeable-views'
+
+interface Props {
+  children?: any
+}
+
+const ProductSlider: FC<Props> = ({ children }) => {
+  const [idx, setIdx] = useState(0)
+  const count = React.Children.count(children)
+
+  const goBack = () => {
+    idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
+  }
+
+  const goNext = () => {
+    idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
+  }
+
+  return (
+    <div className="relative w-full h-full">
+      <div className="absolute flex flex-row inset-0 z-10 opacity-0">
+        <div className="flex-1 bg-cyan" onClick={goBack}></div>
+        <div className="flex-1 bg-pink" onClick={goNext}></div>
+      </div>
+      <SwipeableViews index={idx} onChangeIndex={setIdx}>
+        {children}
+      </SwipeableViews>
+    </div>
+  )
+}
+
+export default ProductSlider

components/product/ProductSlider/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductSlider'

components/product/ProductView/ProductView.tsx

@@ -1,13 +1,13 @@
 import cn from 'classnames'
+import { NextSeo } from 'next-seo'
 import { FC, useState } from 'react'
 import s from './ProductView.module.css'
-import { Button, Container } from '@components/ui'
-import { Swatch } from '@components/product'
 import { Colors } from '@components/ui/types'
-import type { Product } from '@lib/bigcommerce/api/operations/get-product'
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { useUI } from '@components/ui/context'
-import { NextSeo } from 'next-seo'
+import { Button, Container } from '@components/ui'
+import { Swatch, ProductSlider } from '@components/product'
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
+import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 interface Props {
   className?: string
   children?: any
@@ -61,7 +61,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           ],
         }}
       />
-      <div className="relative flex flex-row items-start overflow-hidden fit my-12">
+      <div className="relative flex flex-row items-start fit my-12">
         <div className="absolute top-0 left-0 z-50">
           <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
             {product.name}
@@ -72,13 +72,18 @@ const ProductView: FC<Props> = ({ product, className }) => {
             {product.prices?.price.currencyCode}
           </div>
         </div>
-        <div className="flex-1 px-24 pb-0 relative fit overflow-hidden box-border">
+        <div className="flex-1 px-24 pb-0 relative fit  box-border">
           <div className="absolute z-10 inset-0 flex items-center justify-center">
-            <img
-              className="w-full object-cover"
-              src={product.images.edges?.[0]?.node.urlXL}
-            />
+            <ProductSlider>
+              {product.images.edges?.map((image) => (
+                <img className="w-full object-cover" src={image?.node.urlXL} />
+              ))}
+            </ProductSlider>
           </div>
+          <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
+            <img src="/slider-arrows.png" />
+          </div>
+
           <div className={s.squareBg}></div>
         </div>
         <div className="flex-1 flex flex-col">

components/product/index.ts

@@ -1,3 +1,4 @@
 export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
+export { default as ProductSlider } from './ProductSlider'