Skip to content

Commit

Permalink
Showing 2 changed files with 45 additions and 14 deletions.
5 changes: 5 additions & 0 deletions src/@newrelic/gatsby-theme-newrelic/icons/feather.js
Original file line number Diff line number Diff line change
@@ -34,6 +34,11 @@ export default {
/>
</>
),
'chevron-left': (
<>
<polyline points="15 18 9 12 15 6" />
</>
),
'chevron-right': (
<>
<polyline points="9 18 15 12 9 6" />
54 changes: 40 additions & 14 deletions src/components/ImageSlider/ImageSlider.js
Original file line number Diff line number Diff line change
@@ -11,6 +11,16 @@ const ImageSlider = ({ images, height }) => {
setSelectedImageIndex(nextImageIndex % images.length);
};

const handleClickPrev = () => {
const prevImageIndex = selectedImageIndex - 1;
if (prevImageIndex < 0) {
setSelectedImageIndex(images.length - 1);
console.log(images.length - 1);
} else {
setSelectedImageIndex(prevImageIndex % images.length);
}
};

return (
<div
css={css`
@@ -19,20 +29,36 @@ const ImageSlider = ({ images, height }) => {
`}
>
{images.length > 1 && (
<button
onClick={handleClickNext}
css={css`
position: absolute;
top: 38%;
right: 0;
background: none;
color: var(--color-white);
border: none;
cursor: pointer;
`}
>
<Icon name="chevron-right" size="4rem" />
</button>
<>
<button
onClick={handleClickPrev}
css={css`
position: absolute;
top: 38%;
left: 0;
background: none;
color: var(--color-white);
border: none;
cursor: pointer;
`}
>
<Icon name="chevron-left" size="4rem" />
</button>
<button
onClick={handleClickNext}
css={css`
position: absolute;
top: 38%;
right: 0;
background: none;
color: var(--color-white);
border: none;
cursor: pointer;
`}
>
<Icon name="chevron-right" size="4rem" />
</button>
</>
)}
<a
href={images[selectedImageIndex]}

0 comments on commit b43b7b5

Please sign in to comment.