2 분 소요

react-slick

React slick은 React로 구축된 캐러셀 구성 요소입니다.

회전하면서 콘텐츠를 보여주는 모습이 회전목마를 닮아 Carousel이라 부릅니다.

설치

npm install react-slick --save
yarn add react-slick

//이외에도 기본적인 slick-carousel 모듈을 같이 설치해 주겠습니다.
npm install slick-carousel --save
yarn add slick-carousel

//설치후 Import css 해줍니다.
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";

구현

기본적인 react-slick의 사용 샘플입니다. 아래 샘플에 설정 값만 넣어주시면 사용 가능합니다.

//sample
import React from "react";
import Slider from "react-slick";

class SimpleSlider extends React.Component {
  render() {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };
    return (
      <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>
    );
  }
}

옵션에 대해서 알아보겠습니다.

var settings = {
      dots: true, // 캐러셀의 점을 보여주는지에 대한 옵션입니다.
      infinite: true, // 마지막 장 다음에 첫번째가 나오게 할 것인지에 대한 옵션입니다.
      speed: 500, // 다음 사진으로 넘어가는 속도를 설정하는 옵션입니다.
      slidesToShow: 1, // 몇장씩 보이게 하는지에 대한 옵션입니다.
      slidesToScroll: 1, // 한번에 몇장씩 넘기는지에 대한 옵션입니다.
      autoplay: true // 사진을 자동으로 넘기는지에 대한 옵션입니다.
      autoplaySpeed: 4000,

    };

코드

구현하기에 앞서 아래 코드로만 구현하게되면 사진에 마우스를 가져가면 border 오른쪽이 hover기능에서 구현이 안되는걸 볼수있습니다.

//App.css
* {
  box-sizing: border-box;
}

위 처럼 바꿔 줘야합니다. border-box로 설정하는 것이 일반적으로 css로 스타일링을 하는데 있어서 관행으로 여겨집니다. 이에 관한 내용은 따로 정리해서 업로드하겠습니다.

import React 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";

function ImgSlider() {
  let settings = {
    dots: true,
    Infinity: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
  };

  return (
    <Carousel {...settings}>
      <Wrap>
        <img src="/images/slider-badging.jpg" alt="" />
      </Wrap>
      <Wrap>
        <img src="/images/slider-badag.jpg" alt="" />
      </Wrap>
    </Carousel>
  );
}

export default ImgSlider;

const Carousel = styled(Slider)`
  margin-top: 20px;

  // 버튼에 대한 css 입니다.
  li.slick-active button::before {
    color: white;
  }

  ul li button {
    &:before {
      color: white;
    }
  }

  button {
    z-index: 1;
  }

  //.slick-list에 visible 값을 주면 전 사진과 앞 사진의 끝부분이 보여집니다.
  .slick-list {
    overflow: visible;
  }
`;

const Wrap = styled.div`
  cursor: pointer;

  img {
    border: 4px solid transparent;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-shadow: rgb(0 0 0 /69%) 0px 26px 30px -10px, rgb(0 0 0 / 73%) 0px 16px 10px -10px;
    transition-duration: 300ms;

    &:hover {
      border: 4px solid rgba(249, 249, 249, 0.8);
    }
  }
`;

error

구현 시작후 아래 애러가 나왔습니다.

검색해보니 div가 없어서 발생했다고 해서 div를 Wrap에 넣어줬습니다.

react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

댓글남기기

참고

최대 1 분 소요