Skip to content

Instantly share code, notes, and snippets.

Avatar

Karen Ying karenying

View GitHub Profile
View CarouselSlide.js
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,
View App.js
import React from 'react';
import './App.css';
import CarouselSlide from './CarouselSlide';
function App() {
return (
<div className='App'>
<CarouselSlide
content={{ backgroundColor: '#ff7c7c', title: 'Slide 1' }}
/>
View constants.js
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' },
];
View App.js
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'>
View App.css
.App {
text-align: center;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
View App.js
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>;
}
View App.js
return (
<div className='App'>
<Arrow
direction='left'
clickFunction={() => onArrowClick('left')}
/>
<CarouselSlide content={content} />
<Arrow
direction='right'
clickFunction={() => onArrowClick('right')}
View App.css
svg {
height: 30px;
cursor: pointer;
}
View App.js
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);
};
View App.js
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);