commerce/components/product/ProductSlider/ProductSlider.tsx

import React, { FC, useState } from 'react'
import SwipeableViews from 'react-swipeable-views'
import s from './ProductSlider.module.css'
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={s.root}>
      <div className={s.rootPanel}>
        <div className={s.leftPanel} onClick={goBack}></div>
        <div className={s.rightPanel} onClick={goNext}></div>
      </div>
      <SwipeableViews index={idx} onChangeIndex={setIdx}>
        {children}
      </SwipeableViews>
    </div>
  )
}

export default ProductSlider