annacoding2020

render() {
    // children will be all of our Carousel items.
    const deviceType = 'desktop' // presuming this deviceType is the result after our user-agent detection for the sake of simplicity.
    let itemWidth;
    const isServerSide = !this.state.domLoaded && deviceType;
    if (isServerSide) {
      itemWidth = (100 / this.state.breakpoint[deviceType].itemsToShow).toFixed(1);
      // we are on desktop, then the item width here will be 33.3% based // on our pre-defined breakpoint that we declared in the constructor.
    } else {
      itemWidth = this.state.containerWidth / this.state.slidesToShow;

annacoding2020

      <div ref={this.containerRef}>
        <ul
          style={{
            overflow: isServerSide ? "hidden" : "unset",
            transform: `translate3d(${this.state.transform}px,0,0)`
          }}
        >
       …rest of our stuff

annacoding2020

  componentDidMount() {
    this.setState({ domLoaded: true });
    if(this.containerRef && this.containerRef.current) {
      // here we get the total width of the container
      this.setState({ containerWidth: this.containerRef.current.offsetWidth});
    }
  }

annacoding2020

  componentDidMount() {
    this.setState({ domLoaded: true });
    if(this.containerRef && this.containerRef.current) {
      // here we get the total width of the container
      this.setState({ containerWidth: this.containerRef.current.offsetWidth});
    }
    Object.keys(this.state.breakpoint).forEach(breakpoint => {
      const { min, max, itemsToShow } = this.state.breakpoint[breakpoint];
      if(window.innerWidth >= min && window.innerWidth <= max) {
        this.setState({ slidesToShow: itemsToShow });

annacoding2020

     <Carousel>
       <img style={{ padding: 10, width: '100%' }} src='/image1' />
       <img style={{ padding: 10, width: '100%' }} src='/image2' />
       <img style={{ padding: 10, width: '100%' }} src='/image3' />
     </Carousel>

annacoding2020

  next(){
    const { slidesToShow, slidesToSlide, containerWidth } = this.state;
    const itemWidth = containerWidth / slidesToShow;
    // the reason for the 1 is because our index starts at 0.
    const nextItems = this.state.currentSlide + 1 + slidesToShow;
  }

annacoding2020

if (nextItems <= this.state.totalItems) {
      // if we are not reaching the end of the Carousel.
      const nextCarouselPosition =
        -itemWidth * (this.state.currentSlide + slidesToSlide);
     // notice that our nextCarouselPosition will be a nagative value
      this.setState({
        transform: nextCarouselPosition,
        currentSlide: this.state.currentSlide + slidesToSlide
      });
    } else {

annacoding2020

  <ul
       style={{
         listStyle: "none",
         padding: 0,
         margin: 0,
         display: "flex",
         alignItems: "center",
         transition: 'all .5s',
         overflow: isServerSide ? "hidden" : "unset",
         transform: `translate3d(${this.state.transform}px,0,0)`

annacoding2020

  <ul
       style={{
         listStyle: "none",
         padding: 0,
         margin: 0,
         display: "flex",
         alignItems: "center",
         transition: 'all .5s',
         overflow: isServerSide ? "hidden" : "unset",
         transform: `translate3d(${this.state.transform}px,0,0)`

annacoding2020

 previous() {
    const { slidesToShow, slidesToSlide, containerWidth } = this.state;
    const itemWidth = containerWidth / slidesToShow;
    const previousItems = this.state.currentSlide - slidesToSlide;
    if (previousItems >= 0 ) {
      // if we are not passing the beginning of the Carousel.
      const nextCarouselPosition =
        -itemWidth * previousItems;
      this.setState({
        transform: nextCarouselPosition,