import React from 'react';
import TouchCarousel from 'react-touch-carousel'
class App extends React.Component {

carouselComponent() {
    return (
        <div style={{backgroundColor: "yellow", height:400, width: "90%"}}>

        </div>
    )
}

renderCard(index, modIndex) {
    return (
        <div style= {{color: "red"}}>
            {index}
            <div>
                <div className='carousel-title'>{'title'}</div>
                <div className='carousel-text'>{'text'}</div> 
            </div>
        </div>
    )
}

render() {
    return (
        <TouchCarousel
            component={this.carouselComponent.bind(this)}
            cardCount={3}
            cardSize={375}
            renderCard={this.renderCard.bind(this)}
            loop
            autoplay={3000}
        />
    )
}
}

 export default App

const  cardSize = 100;
const  cardPadCount = 3;
const  carouselWidth = clamp(window.innerWidth, 0, 960);

.
.
.
.

  function CarouselContainer (props) {
    const { cursor, carouselState, ...rest } = props
    // Put current card at center
    const translateX = (cursor - cardPadCount) * cardSize + (carouselWidth - cardSize) / 2

    return (
      <NonPassiveTouchTarget className='carousel-container'>
        <NonPassiveTouchTarget
          className='carousel-track'
          style={{ 
            transform: `translate3d(${translateX}px, 0, 0)`,
          }}
          {...rest}
        />
      </NonPassiveTouchTarget>
    )
}

.top-level-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow-x: hidden;
  width: 100vw;
  margin-top: 0;
  margin-left: 0;
  z-index: 99;
}

.carousel-container {
  height: 300px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  height: 100%;
}

.carousel-card {
  flex: 0 0 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  color: white;
  -webkit-tap-highlight-color: transparent;
}

.image-container {
  max-width: 8em;
  max-height: 8em;
  width: 4em;
  height: 4em;
  background-size: cover;  
}

.carousel-card-inner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 180px;
  color: rgba(0,0,0,.5);
  transition: inherit;
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); */
  border: 5px solid black;
  border-radius: 1.5em;
}

`import React from 'react';
import './Projects.css';
import TouchCarousel from 'react-touch-carousel'
const Projects = () => {

    const myProjects = [
        {
            image: require('../assets/budget.png'),
            title: 'Budget App',
            description: 'A budget app that allows you to track your expenses and income. You can also add new expenses and income to your budget.',
        },
        {
            image: require('../assets/weather.PNG'),
            title: 'Weather App',
            description: 'A weather app that allows you to search for weather conditions in any city. You can also add a new city to your list of cities.',
        },
    
    ]
    function CarouselContainer(){
        // render the carousel structure
        }
        
function renderCard(index, modIndex, cursor){
const item = myProjects[modIndex];
 // render the item 
}

  return (
        
    <TouchCarousel
  component={CarouselContainer}
  cardCount={myProjects.length}
  cardSize={375}
  renderCard={renderCard}
  loop
  autoplay={3000}
></TouchCarousel>
  
  )
}

export default Projects`

const CarouselRef = useRef<any>({
    next: () => null,
    prev: () => null,
  });

const snapSelectedMember = () => {
    if (!selectedMember) return;
    const index = ordersMembers.findIndex(member => member.id === selectedMember.id) || 0;
    if(index === -1) return;
if (index < currentIndex) {
      for (let i = index; i <= currentIndex; i++) { CarouselRef.current.prev(); }
    } else {
      for (let i = currentIndex; i <= index; i++) { CarouselRef.current.next(); }
    }
    setCurrentIndex(index);
};

        ref={CarouselRef}
        component={CarouselContainer}
        cardCount={ordersMembers?.length}
        renderCard={(index: number, modIndex: any, cursor: number, carouselState: any) => RenderCard({ index, modIndex, cursor, carouselState, item: ordersMembers[modIndex], currentIndex, onIndexChange })}
        defaultCursor={currentIndex}
        onDragStart={() => setDisableDraging(true)}
        onDragEnd={() => setDisableDraging(false)}
        onDragCancel={() => setDisableDraging(false)}
        loop={false}
      />

const [carouselShouldPlay, setCarouselShouldPlay] = useState(true);


...

      <TouchCarousel
          component={Container}
          cardSize={cardSize}
          cardCount={handData.length}
          cardPadCount={cardPadCount}
          renderCard={renderCard}
          play={carouselShouldPlay}
      />

...

export function Carousel() {
  return h(TouchCarousel, {
    component: ContainerComponent, // <-- I'd like to pass `next` into this component
    cardCount: 3,
    renderCard,
    loop: false,
  });
}