-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
slick 이 작동을 안합니다 !
21.10.10 22:08 작성 조회수 332
0
현재 화면의 상태입니다.
제가 강의를 보면서 작성한 코드가 작동을 하지 않아서 제공되는 코드를 git에서 긁어서 넣어 봤는데도 똑같은 현상이 일어납니다.
ImagesZoom 에서 index.js와 styles.js를 만들고 그것을 zerocho teacher가 만든 코드를 넣엇습니다.
그런데도 클릭을 하면 배경이 검은색이 되고 넘길수 있어야 하는데 그런것은 없이 맨 상단의 사진처럼 그냥 맨 위에 상세 이미지와 x버튼만 나오는 것을 확인할 수 있습니다.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Slick from 'react-slick';
import { Overlay, Header, CloseBtn, SlickWrapper, ImgWrapper, Indicator, Global } from './styles';
const ImagesZoom = ({ images, onClose }) => {
const [currentSlide, setCurrentSlide] = useState(0);
return (
<Overlay>
<Global />
<Header>
<h1>상세 이미지</h1>
<CloseBtn onClick={onClose} />
</Header>
<SlickWrapper>
<div>
<Slick
initialSlide={0}
beforeChange={(slide, newSlide) => setCurrentSlide(newSlide)}
infinite
arrows={false}
slidesToShow={1}
slidesToScroll={1}
>
{images.map((v) => (
<ImgWrapper key={v.src}>
<img src={v.src} alt={v.src} />
</ImgWrapper>
))}
</Slick>
<Indicator>
<div>
{currentSlide + 1}
{' '}
/
{images.length}
</div>
</Indicator>
</div>
</SlickWrapper>
</Overlay>
);
};
ImagesZoom.propTypes = {
images: PropTypes.arrayOf(PropTypes.shape({
src: PropTypes.string,
})).isRequired,
onClose: PropTypes.func.isRequired,
};
export default ImagesZoom;
위는 index.js이고 밑은 style.js입니다.
import styled, { createGlobalStyle } from 'styled-components';
import { CloseOutlined } from '@ant-design/icons';
export const Global = createGlobalStyle`
.slick-slide {
display: inline-block;
}
.ant-card-cover {
transform: none !important;
}
`
export const Overlay = styled.div`
position: fixed;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
`;
export const Header = styled.header`
height: 44px;
background: white;
position: relative;
padding: 0;
text-align: center;
& h1 {
margin: 0;
font-size: 17px;
color: #333;
line-height: 44px;
}
`;
export const SlickWrapper = styled.div`
height: calc(100% - 44px);
background: #090909;
`;
export const CloseBtn = styled(CloseOutlined)`
position: absolute;
right: 0;
top: 0;
padding: 15px;
line-height: 14px;
cursor: pointer;
`;
export const Indicator = styled.div`
text-align: center;
& > div {
width: 75px;
height: 30px;
line-height: 30px;
border-radius: 15px;
background: #313131;
display: inline-block;
text-align: center;
color: white;
font-size: 15px;
}
`;
export const ImgWrapper = styled.div`
padding: 32px;
text-align: center;
& img {
margin: 0 auto;
max-height: 750px;
}
`;
도대체 무엇을 잘못한걸까요?
import를 잘못햇으면 뭐가 선언이 되지 않앗다 오류가 날텐데
이 경우에는 직접 작성한 것이 작동하지 않아 심지어
그대로 긁어온것인데 말이죠 ㅠㅠ
답변을 작성해보세요.
1
조현영
지식공유자2021.10.10
지금 상황은 css가 적용되지 않은 것인데요. 특히 SlickWrapper가 안 되어 있습니다.
왜 안된 것인지는 제가 여기서 짐작하기 어렵습니다. nodebird.com 에 들어가셔서 개발자도구로
제 사이트는 어떤 부분에서 css가 적용되어서 되는건지 비교해보세요. 아마 거기서 차이점이 보이실 겁니다.
0
seonjun Moon
질문자2021.10.11
잠시 놀다가 다시 자기전에 와서 보니까 이게 돌아가네요...
모종의 이유로 안됐던것 같은데 ... 왠지모르게 반영이 안됐던것 같습니다 ㅠㅠ 답변 감사합니다...
답변 2