slider.tsx

import React, { FormEvent } from "react";
import "./styles.scss";

export interface Pics {
    id: number;
    path: string;
    alt: string;
}
export interface CarouselProps {
    pics: Pics[];
}
export function Carousel(props: CarouselProps) {
    const { pics } = props;
    const [current, setCurrent] = React.useState(0);
    const { length } = pics;

    const onPicChanger = (evt: FormEvent<HTMLButtonElement>) => {
        evt.preventDefault();

        const { name } = evt.currentTarget;
        const operation = name === "plus" ? 1 : -1;
        const toShow = operation + current;
        if (toShow >= length) {
            setCurrent(0);
        } else if (toShow < 0) {
            setCurrent(length - 1);
        } else {
            setCurrent(toShow);
        }
    };
    const slides = pics.map((item, index) => {
        return (
            <div key={item.id} className={current !== index ? "mySlides" : "current"}>
                <div className="numbertext">
                    {index} / {length}
                </div>
                <img src={item.path} alt={item.alt} />
                <span className="brand">Modelaje Independiente</span>
            </div>
        );
    });

    const setImage = (e: FormEvent<HTMLButtonElement>) => {
        const { name } = e.currentTarget;
        setCurrent(Number(name));
    };

    const thumn = pics.map((pic, index) => (
        <div className="column">
            <button
                type="button"
                className={current === index ? "demo active" : "demo"}
                onClick={setImage}
                name={`${index}`}
            >
                <img src={pic.path} alt={pic.alt} />
            </button>
        </div>
    ));
    return (
        <div className="carrousel-container">
            {slides}

            <button
                type="button"
                className="prev"
                onClick={onPicChanger}
                name="minus"
            >
                &#10094;
            </button>
            <button
                type="button"
                className="next"
                onClick={onPicChanger}
                name="plus"
            >
                &#10095;
            </button>
            <div className="carrousel-row">{thumn}</div>
        </div>
    );
}

styles.scss

/* ----------------------------------------------
 * Generated by Animista on 2020-7-17 21:8:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes slide-in-elliptic-bottom-fwd {
    0% {
      -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
              transform: translateY(600px) rotateX(30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% -1400px;
              transform-origin: 50% -1400px;
      opacity: 1;
    }
  }
  @keyframes slide-in-elliptic-bottom-fwd {
    0% {
      -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
              transform: translateY(600px) rotateX(30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% -1400px;
              transform-origin: 50% -1400px;
      opacity: 1;
    }
  }

.carrousel-container {
    transition: all 1s;
    animation-delay: 4s;
  }

  .carrousel-row {
      display: flex;
      width: 100%;
      .column {
          flex: 1;
        width: 100%;
        &:not(:last-child) {
            margin-right: 5px;
        }
          button {
              margin: 0;
              padding: 0;
              border: none;
              background-color: transparent;
          }

          img {
              width: 100%;
          }
      }

  }

  .current {
    background-color: transparent;
    width: 100%;
    height: 100%;
      margin: 0;
      padding: 0;
      border-radius: 0!important;

    -webkit-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

    img {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
    background-color: transparent;
  }

  /* Add a pointer when hovering over the thumbnail images */
  .cursor {
    cursor: pointer;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    color: white;
    background-color: transparent;
    border: none;
    user-select: none;
    -webkit-user-select: none;

    &:focus {
        outline: none;
    }
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    border: none;
    outline: none;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 2rem;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  .brand {
      color: white;
      position: fixed;
      left: 1.6rem;
      top:92%
  }
  /* Container for image text */
  .caption-container {
    text-align: center;
    padding: 2px 16px;
    color: white;
  }

  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.6;
  }

  .active,
  .demo:hover {
    opacity: 1;
  }