karenying

.App {
    text-align: center;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

karenying

import React from 'react';
import { Card, makeStyles } from '@material-ui/core';

export default function CarouselSlide(props) {
    const { backgroundColor, title } = props.content;

    const useStyles = makeStyles(() => ({
        card: {
            backgroundColor,
            borderRadius: 5,

karenying

import React from 'react';
import './App.css';
import CarouselSlide from './CarouselSlide';

function App() {
    return (
        <div className='App'>
            <CarouselSlide
                content={{ backgroundColor: '#ff7c7c', title: 'Slide 1' }}
            />

karenying

export const SLIDE_INFO = [
    { backgroundColor: '#ff7c7c', title: 'Slide 1' },
    { backgroundColor: '#ffb6b9', title: 'Slide 2' },
    { backgroundColor: '#8deaff', title: 'Slide 3' },
    { backgroundColor: '#ffe084', title: 'Slide 4' },
    { backgroundColor: '#d9d9d9', title: 'Slide 5' },
];

karenying

import React from 'react';
import './App.css';
import CarouselSlide from './CarouselSlide';
import { SLIDE_INFO } from './constants';

function App() {
    const content = SLIDE_INFO[3];

    return (
        <div className='App'>

karenying

import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';

function Arrow(props) {
    const { direction, clickFunction } = props;
    const icon = direction === 'left' ? <FaChevronLeft /> : <FaChevronRight />;

    return <div onClick={clickFunction}>{icon}</div>;
}

karenying

    const [index, setIndex] = useState(0);
    const content = SLIDE_INFO[index];
    const numSlides = SLIDE_INFO.length;

    const onArrowClick = (direction) => {
        const increment = direction === 'left' ? -1 : 1;
        const newIndex = (index + increment + numSlides) % numSlides;
        setIndex(newIndex);
    };

karenying

    return (
        <div className='App'>
            <Arrow
                direction='left'
                clickFunction={() => onArrowClick('left')}
            />
            <CarouselSlide content={content} />
            <Arrow
                direction='right'
                clickFunction={() => onArrowClick('right')}

karenying

svg {
    height: 30px;
    cursor: pointer;
}

karenying

    const [slideIn, setSlideIn] = useState(true);
    const [slideDirection, setSlideDirection] = useState('down');

    const onArrowClick = (direction) => {
        const increment = direction === 'left' ? -1 : 1;
        const newIndex = (index + increment + numSlides) % numSlides;

        const oppDirection = direction === 'left' ? 'right' : 'left';
        setSlideDirection(direction);
        setSlideIn(false);