Slideshow

Dados

const slideshow = [
https://loremflickr.com/320/240/paris?lock=1 “,
https://loremflickr.com/320/240/paris?lock=2 “,
https: // loremflickr .com / 320/240 / paris? lock = 3
];

Estilos

* {
box
-sizing: border-box;
}
body
{
font
-family: sans-serif;
background
: tomato;
}
button
{
background
: none;
border
: none;
cursor
: pointer;
font
-size: 2rem;
vertical
-align: middle;
}
img
{
max
-width: 100%;
}
:disabled {
opacity
: 0.4;
}
/* Slideshow */
.slideshow {
width
: 100%;
}
.slideshow > * {
display
: flex;
justify
-content: space-between;
}

.slides > * {
display
: none;
border
: 7px solid #fff;
}
.slides > *.active {
display
: block;
animation
: fade-in 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
0% {
opacity
: 0;
}
100% {
opacity
: 1;
}
}

Botões Anterior e Próximo

const PrevNextNav = ({ step, totalSteps, setItem, children }) => {
const prev = step => Math.max(0, step - 1);
const next = step => Math.min(totalSteps, step + 1);

return (
<div>
<button disabled={step === 0} onClick={() => setItem(prev(step))}> &laquo;</button>
{children}
<button disabled={step === totalSteps} onClick={() =>setItem(next(step))}>&raquo;</button>
</div>
);
};

Aplicativo

class App extends Component {
state
= { currentSlide: 0 };

setSlide
= currentSlide => {
this.setState({ currentSlide });
};
render
() {
const { currentSlide } = this.state;

return (
<div className="app">
<div className="slideshow">
<PrevNextNav
totalSteps
={slideshow.length - 1}
setItem
={this.setSlide}
step
={currentSlide}
>
<div className="slides">
{slideshow.map((o, i) => (
<img
className
={`${i === currentSlide ? "active" : ""}`}
key
={i}
src
={o}
/>
))}
</div>
</PrevNextNav>
</div>
</div>
);
}
}