TIL 29. React Slick
2차 플젝하면서 원래 페이지에는 Slick을 써서 추천 책을 썼지만 다른 부분에 더 집중하기 위해 그 부분을 뺐었는데 지금 끝난 후에 리팩토링하면서 React-Slick 을 만들어보아따!!!!!!
💻 React-Slick 설치 및 사용법
React-Slick 설치
npm
npm install react-slick --save
저장하기 위해 --save 써주기 !
그 후에 css를 include 해주기 위해
npm
npm install slick-carousel --save
설치 후에 import 해줘야 하기 때문에 GlobalStyles.js
에 추가!
index.js
나 캐러셀 파일에 import 해줘도 무관
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";
기본적인 Slick 코드
이렇게 작성하면 숫자로 넘어가는 Slick이 생긴다!!
import React, { Component } from "react";
import Slider from "react-slick";
export default class SimpleSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
}
하지만 우리는 프론트엔드가 아닌가 ..
setting 을 통해 커스텀을 해야 우리가 원하는 디자인을 만들수 있다!!
🔥 Setting
이렇게 코드를 수정했고 사진, 이름, 저자를 넣어보았습니다
const settings = {
dots: true, // 캐러셀의 점을 보여줄 것 인지
infinite: true, // 마지막장 다음에 첫장이 나오게 할 지
speed: 500, // 넘어가는 속도
autoplay: true, // 자동으로 재생할지
autoplaySpeed: 1000, //전체적으로 넘어가는 속도
slidesToShow: 6, // 한 화면에 몇개의 사진을 동시에 보여줄지
slidesToScroll: 1,
};
💅🏻 Styled-Component 적용법
slider 자체에 css를 주고 싶었지만 처음엔 기존방식대로 쓰니까 적용이 안되었다..
하지만 구글링 끝에 방법을 찾아따.. !!
import React, {Component} from "react";
import styled from 'styled-components';
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
const StyledSlider = styled(Slider)`
.slick-slide div{
outline: none; // 슬라이드 클릭시 파란선을 제거하기 위해서 작성
}
`;
이런식으로 styled(Slider)
를 사용해 클래스 선택자를 이용해 미리 선언된 클래스에 접근할 수 있다!!
수위의 서재를 하면서 못해본 slick을 이렇게 만들어보았다 😏😏
Author And Source
이 문제에 관하여(TIL 29. React Slick), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rhdwnals1/TIL-29.-React-Slick저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)