ReactJS 및 Styled-Components로 슬라이드쇼 갤러리를 만드는 방법
25609 단어 reactjavascript
이 블로그 게시물은 전체 뷰포트 슬라이드쇼 갤러리를 구축하는 방법을 보여줍니다.
전제 조건
The complete code is in this repo.
슬라이드쇼 갤러리 레이아웃
슬라이드쇼의 구성은 어떻게 됩니까? 다음 와이어 프레임으로 우리를 덮었습니다.

슬라이드 래퍼
와이어프레임에서 컨테이너가 모든 요소를 래핑하는 것을 볼 수 있습니다. 먼저
SlideWrapper
스타일 구성 요소를 생성해 보겠습니다.// src/slideshow-gallery/index.js
import styled from 'styled-components';
const View = () => <Slideshow />;
const Slideshow = () => {
return <SlideWrapper></SlideWrapper>;
};
const SlideWrapper = styled.div`
position: relative;
width: 100vw;
height: 100vh;
`;
export default View;
SlideWrapper
는 전체 뷰포트의 너비와 높이를 차지합니다. 우리는 전체 뷰포트 슬라이드쇼를 원했습니다. 맞죠? 그리고 아이들은 이 래퍼를 기준으로 위치를 지정하므로 position: relative;
.이미지 상자
선택한 각 이미지는 이미지 비율(너비/높이)을 유지하는 상자에 있습니다.
<img>
라는 ImageBox
태그 주위에 래퍼를 만들어 보겠습니다. 이 래퍼는 이미지를 제약 조건에 넣습니다. 즉, 이미지는 래퍼의 경계 내에 있어야 합니다. 그렇게 하면 이미지 크기와 방향에 관계없이 슬라이드쇼가 안정적으로 유지됩니다.
다음에서는
ImageBox
구성 요소를 정의하고 사용합니다.// src/slideshow-gallery/index.js
// ...
const ImageBox = styled.div`
position: relative;
background-color: #343434;
width: 100%;
height: 85%;
img {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
}
`;
const Slideshow = () => {
return (
<SlideWrapper>
<ImageBox>
<img alt="" src="/pathToAnImage" />
</ImageBox>
</SlideWrapper>
);
};
//...
다음은 이미지 방향과 크기가 다른 결과입니다.

우리
ImageBox
는 이미지 사이를 전환하는 데 도움이 되는 왼쪽 및 오른쪽 버튼이 필요합니다. 이를 수행하기 위해 NavButton
스타일 구성 요소를 만들어 보겠습니다.// src/slideshow-gallery/index.js
import styled, { css } from 'styled-components';
import rurikoTempleImage from './assets/ruriko-in-temple.jpeg';
import { ReactComponent as ChevronLeft } from './assets/chevron-left.svg';
import { ReactComponent as ChevronRight } from './assets/chevron-right.svg';
// ...
const Slideshow = () => {
return (
// ...
<ImageBox>
<img alt="" src={rurikoTempleImage} />
<NavButton position="left">
<ChevronLeft />
</NavButton>
<NavButton position="right">
<ChevronRight />
</NavButton>
</ImageBox>
// ...
);
};
const NavButton = styled.button`
cursor: pointer;
position: absolute;
top: 45%;
padding: 5px;
border-radius: 3px;
border: none;
background: rgba(255, 255, 255, 0.7);
${({ position }) =>
position === 'left' &&
css`
left: 10px;
`}
${({ position }) =>
position === 'right' &&
css`
right: 10px;
`}
`;
// ...
NavButton
는 ImageBox
( top: 45%;
)에서 수직으로 중앙에 있습니다. 위치 소품에 따라 NavButton
가 왼쪽 또는 오른쪽에 배치됩니다.
하단에 캡션이 있는 것도 좋을 것입니다.
// src/slideshow-gallery/index.js
const Slideshow = () => {
return (
<SlideWrapper>
<ImageBox>
// ...
<ImageCaption>Ruriko Temple</ImageCaption>
</ImageBox>
</SlideWrapper>
);
};
// ...
const ImageCaption = styled.span`
width: 100%;
text-align: center;
font-weight: bold;
position: absolute;
bottom: 0;
padding: 8px;
background: rgba(255, 255, 255, 0.7);
`;
// ...
그리고 우리는 다음을 얻습니다.

슬라이드쇼 항목을 소품으로 가져오기
슬라이드쇼는 외부에서 일련의 이미지를 가져와야 합니다.
src/slideshow-gallery/data.js
파일은 우리가 사용할 수 있는 그림 배열을 내보냅니다. 각 항목은 이미지 소스와 이미지 캡션에 대한 액세스를 제공합니다.// src/slideshow-gallery/data.js
import rurikoTemple from './assets/ruriko-in-temple.jpeg';
import itsukushimaShrine from './assets/itsukushima-shrine.jpeg';
// ...
const slideItems = [
{
image: nemichiJinja,
caption: 'Nemichi-Jinja, Seki',
},
{
image: itsukushimaShrine,
caption: 'Itsukushima Shrine',
},
// ...
];
export default slideItems;
이 배열을 가져와서
Slideshow
구성 요소로 전달해 보겠습니다.// src/slideshow-gallery/index.js
// ...
import data from './data';
const View = () => <Slideshow items={data} />;
// ...
Slideshow
구성 요소는 선택한 이미지에 따라 다르게 렌더링되므로 상태를 사용해야 합니다. 이 상태는 현재 활성 항목의 색인 외에 모든 슬라이드 항목을 보유합니다.// src/slideshow-gallery/index.js
import { useState } from 'react';
// ...
const Slideshow = (props) => {
const [{ items, activeIndex }, setState] = useState({
items: props.items,
activeIndex: 0, // begin with the first item
});
return (
<SlideWrapper>
<ImageBox>
<img alt={items[activeIndex].caption} src={items[activeIndex].image} />
<NavButton position="left">
<ChevronLeft />
</NavButton>
<NavButton position="right">
<ChevronRight />
</NavButton>
<ImageCaption>{items[activeIndex].caption}</ImageCaption>
</ImageBox>
</SlideWrapper>
);
};
// ...
이미지 간 탐색
상태가 적절하면 각각에 클릭 핸들러 함수
NavButton
를 추가하여 이미지를 변경할 수 있습니다.// src/slideshow-gallery/index.js
// ...
const Slideshow = (props) => {
// ...
const moveTo = (newIndex) => () => {
if (newIndex === -1) {
// jump from the first image to the last
setState((s) => ({ ...s, activeIndex: items.length - 1 }));
return;
}
if (newIndex === items.length) {
// jump from the last image to the first
setState((s) => ({ ...s, activeIndex: 0 }));
return;
}
setState((s) => ({ ...s, activeIndex: newIndex }));
};
return (
<SlideWraper>
// ...
<NavButton position="left" onClick={moveTo(activeIndex - 1)}>
// ...
<NavButton position="right" onClick={moveTo(activeIndex + 1)}>
// ...
</SlideWraper>
);
};
// ...
썸네일 이미지
ImageBox
다음에 모든 이미지에 대한 축소판 목록이 필요합니다. 해당 목록은 100% 불투명도의 활성 이미지 축소판을 표시합니다. 비활성 항목은 40% 투명합니다.// src/slideshow-gallery/index.js
// ...
const Slideshow = (props) => {
// ...
return (
<SlideWraper>
// ...
</ImageBox>
<ThumbnailList>
{items.map((item, index) => (
<Thumbnail active={activeIndex === index} src={item.image} />
))}
</ThumbnailList>
</SlideWraper>
);
};
const ThumbnailList = styled.div`
display: flex;
align-items: stretch;
width: 100%;
height: 15%;
`;
const Thumbnail = styled.div`
cursor: pointer;
opacity: ${({ active }) => (active ? 1 : 0.6)};
background-image: url(${({ src }) => src});
background-size: cover;
background-position: center;
flex-grow: 1;
:hover {
opacity: 1;
}
`;
// ...
마지막으로 축소판을 클릭하여 이미지로 직접 이동하려고 합니다. 이를 위해
moveTo
함수를 재사용합니다.// src/slideshow-gallery/index.js
// ...
{
items.map((item, index) => (
<Thumbnail
onClick={moveTo(index)}
// ...
/>
));
}
// ...
이제 슬라이드쇼 갤러리가 준비되었습니다! 최종 결과를 살펴보십시오.

결론
와이어프레임에서 슬라이드쇼의 뚜렷한 부분을 분해했습니다. 최종 UI까지 구축한 초석이었습니다.
당신은 끝까지 그것을 만들기 위해 등을 두드릴 수 있습니다.
읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(ReactJS 및 Styled-Components로 슬라이드쇼 갤러리를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nazifbara/how-to-make-a-slideshow-gallery-with-reactjs-and-styled-components-45p1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)